vue 路由传参的方法

1.经过配置路由的name 进行匹配路由，经过params/query达到传递参数的效果

//跳转代码
this.$router.push({
		    name: 'Detail',
		    params: {
			id: id
			}
		})复制代码

路由配置

{
    path: '/detail',
    name:'Detail',
    component: Detail
},复制代码

获取参数

this.$route.params.id复制代码

优势 ：参数不在url里面显示

缺点：页面刷新，参数不存在

query和params用法同样，只须要把params 改为 query 

2.经过url传参

//跳转代码
this.$router.push({
		    name: 'Detail',
		    query: {
			id: id
			}
		})复制代码

路由配置

{
    path: '/detail',
    name:'Detail',//无关紧要
    component: Detail
},复制代码

获取参数

this.$route.query.id复制代码

优势 ：页面刷新，参数存在

缺点：参数在url里面显示，不美观

3.直接用$router.push 实现携带参数的跳转

//跳转代码
this.$router.push({ path:`../detail/${id}`})复制代码

路由配置

{
    path: '/detail/:id',
    name:'Detail',//无关紧要
    component: Detail
},复制代码

获取参数

this.$route.params.id复制代码

小结：query在页面刷新后，参数还存在，可是会在url中展现

params页面刷新后 参数不存在，会致使报错