vue路由传参方式

<div @click=“clickRouter”> 以此点击事件为例子

1.path传参

代码如下（示例）：

methods:{
  clickRouter(id){
  	this.$router.push({
		path:'/detail/${id}'
	})
  }
}
//路由配置
{
    path: '/detail/:id',
    name: 'detail',
    component: detail
}
//获取参数 this.$route.params.id

2.params传参

代码如下（示例）：

methods:{
	clickRouter(id){
		this.$router.push({
			path:'/detail',
			params:{
				id:id
			}
		})
	}
	//路由配置
	{
	    path: '/detail/:id',
	    name: 'detail',
	    component: detail
	}
	//获取参数 this.$route.params.id

}

2.query传参

代码如下（示例）：

methods:{
	clickRouter(id){
		this.$router.push({
			path:'/detail',
			query:{
				id:id
			}
		})
	}
	//路由配置
	{
	    path: '/detail',
	    name: 'detail',
	    component: detail
	}
	//获取参数 this.$route.query.id
}

参考链接🔗 https://www.jianshu.com/p/d276dcde6656