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