在mounted方法可以取到路由参数
方法一：params 传参
this.$router.push({
name:"admin",
//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取)
params:{id:item.id}
})
//这个组件对应的路由配置
{
//组件路径
path: '/admin',
//组件别名
name: 'admin',
//组件名
component: Admin,
}
通过 params 传递参数，如果我们想获取 id 的参数值，可以通过 this.$route.params.id。
//vue接收页面
let id= this.$route.params.id;
let name= this.$route.params.name;
特别注意：获取参数的时候是 $route，跳转和传参的时候是 r o u t e r 。（注意 router。 （注意router。（注意route与$router的区别）
方法二：路由属性配置传参
this.$router.push({
path:"/admin/${item.id}",
})
//这个组件对应的路由配置
{
//组件路径
path: '/admin:id',
//组件别名
name: 'admin',
//组件名
component: Admin,
}
通过路由属性配置传参我们可以用 this.$route.params.id 来获取到 id 的值。
//vue接收页面
let id= this.$route.params.id;
let name= this.$route.params.name;
⚠️注意：this.$router.push 方法里面路径带的是值，路由配置项那里带的是变量名(属性名)来实现的对应。
方法三：query 传参
this.$router.push({
name:"/admin",
query:{
id：item.id,
name：item.name,
}
})
//这个组件对应的路由配置
{
//组件路径
path: '/admin',
//组件别名
name: 'admin',
//组件名
component: Admin,
}
通过 query 传参，如果我们想获取 id 的参数值，可以通过 this.$route.query.id。
//vue接收页面
let id= this.$route.query.id;
let name= this.$route.query.name;
用 query 传参可以解决页面刷新参数消失问题，这种方式可以理解为是 ajax中的 get 方法，参数是直接在 url 后面添加的，参数是可见的。
方法四：localStorage
// 存数据
localStorage.setItem("numbers", JSON.stringify(this.numbers));
// 取数据
this.numbers = JSON.parse(localStorage.getItem("numbers"));
但是注意使用 localStorage 时，如果变量名起的过于普通可能容易被其它页面存的数据覆盖。
三、params和query的区别
除了params可以传递参数，query也可以，写法其实很相似，
区别在于
1、params需要用name来引入，query需要path来引入
2、query类似于ajax中get传参，params类似于post，即query在浏览器地址栏中显示参数，params不显示
params的
1、params 方式传递和接收参数
//传参
this.$router.push({
name: 'checkDetailInfo',
params:{
fkdNum:fkdNum,
jyayStr:jyayStr,
defaultStr:defaultStr,
detailViewBtn:detailViewBtn
}
});
//接收参数
this.toplistInfo = this.$route.params;
2、query传参
//传参
this.$router.push({
path: '/checkDetailInfo',
query:{
fkdNum:fkdNum,
jyayStr:jyayStr,
defaultStr:defaultStr,
detailViewBtn:detailViewBtn
}
});
//接收参数
this.$route.query
小结
#####1、区别：如图可以清楚看出，query相当于get请求，页面跳转时，地址栏有请求的参数。params相当于post请求，参数不会在地址栏显示出来。
#####2、 params传参，push里面只能是 name:‘xxxx’，注意配对使用，否则接收参数为undefined。
3、router 和route区别
r o u t e r 为 V u e R o u t e r 实 例 ， 想 要 导 航 到 不 同 U R L ， 则 使 用 router为VueRouter实例，想要导航到不同URL，则使用router为VueRouter实例，想要导航到不同URL，则使用router.push方法
$route为当前router跳转对象，里面可以获取name、path、query、params等
路由传参分为 params 传参与 query 传参
params 传参类似于网络请求中的 post 请求，params 传过去的参数不会显示在地址栏中（但是不能刷新）。params 只能配合 name 使用，如果提供了 path，params 会失效。
如果用到了动态路由：‘/user/:id’，那么params就不会类似于post请求，传递过去的就是params参数，会拼接显示在地址栏中，比如：/user/13。
query 传参类似于网络请求中的 get 请求，query 传过去的参数会拼接在地址栏中（?name=xx）。query 较为灵活既可以配合 path 使用，也能配合 name 使用（亲测可用）。
name是什么呢？name 是配置路由时给 path 取的别名，方便使用。但要注意的是 “地址栏显示的路径始终是 path 的值”
const routes = [
{
path: '/login',
component: Login
},
{
path: '/home',
name: 'home',
component: Home
}
]
name 最重要的一点就是配合 params 进行路由的参数传递。我们来看一个列子：当我们登录之后我们需要把用户名带到主页进行展示。当然方法有许多比如localStorage，sessionStorag，中央事件总线bus，但我们这里需要学习路由传参。
方式一：通过 params 传参
编程式
data:{
username: ''
},
login() {
...
this.$router.push({
name: 'home', //注意使用 params 时一定不能使用 path
params: { username: this.username },
})
}
声明式
<router-link :to="{ name: 'home', params: { username: username } }">
取值：this.$route.params.username
方式二：通过 query 传参
编程式
data:{
username: ''
},
login() {
...
this.$router.push({
path: '/home',
query: { username: this.username },
})
}
声明式：
<router-link :to="{ path: '/home', query: { username: username } }">
取值：this.$route.query.username
params 传参后，刷新页面会失去拿到的参数。所以路由参数要修改为 ‘/login/:username’（官方称为动态路由）
const routes = [
{
path: '/login',
component: Login
},
{
path: '/home/:username',
name: 'home',
component: Home
}
但是这样就不会类似于 post 请求，他会把接收到的参数替换作为地址。
假如传入参数为：params: { username: ‘admin’}，那么最终访问的地址为：http://localhost:8080/home/admin
总结
通过登录的例子来看，如果用户名不是敏感信息，可以直接放在地址栏中（使用query参数）
为什么不用params传参？由于 params 传参不能刷新。或满足刷新需求，但要对地址进行修改，用户名一样会显示在地址栏中
