vue路由传参的三种方式

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/ $i{d} })

路由配置

{
path: ‘/detail/:id’,
name: ‘Detail’,
component: Detail
}

获取参数

this.$route.params.id