**
vue路由传参的三种方式
**
方式一
通过query方式传参
这种情况下 query传递的参数会显示在url后面 复制代码
this.$router.push({
path: '/detail',
query: {
id: id
}
})
复制代码
对应路由配置:
{
path: '/detail',
name: 'Detail',
component: Detail
}
子组件获取参数
this.$route.query.id
方式二
通过params方式传参 复制代码
this.$router.push({
name: 'Detail',
params: {
id: id
}
})
复制代码
路由配置
{
path: '/detail',
name: 'Detail',
component: Detail
}
获取参数
this.$route.params.id
方式三
直接在路由地址后面拼接参数
this.$router.push({
path: `/detail/${id}`,
})
路由配置
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
获取参数
th`is.$route.params.id`