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中展示