vue组件之嵌套路由传参跳转?
vue 路由传参的三种基本方式:
- 现有场景如下,点击父组件的li 元素,跳转到 子组件,并携带参数,便于子组件获取数据。
父组件中:
<li v-for="article in articles" @click="getDescribe(article.id)">
方案1:
去目标组件页
Methods中:
goPage( 携带参数 ) {
// 直接调用 $router.push 实现携带参数跳转
this.$router.push({
Path: `/目标页面地址名称/${ 参数 } `
})
}
在目标页面对应路由配置如下:
{
path: ‘/自己路由地址/:id’,
name: ‘ 自己页面名称 ’,
component: 组件名
}
项目中实例 :
在路由处也要做相应处理
父组件中:
在目标页接收传过来的参数:
this.$route.params.id // 这种方式获取
方式2:
父组件通过路由属性中的name 来确定匹配的路由,通过 params来传递参数。
// 去目标组件页
goPage( 数据源 ) {
// 直接调用 $router.push 实现携带参数跳转
this.$router.push({
name: ‘ 目标地址 ’,
Params: {
Id: id
...参数
}
})
}
方式3:
父组件使用 path 来匹配路由, 然后通过 query 来传递参数,
这种情况下,query 传递的参数会显示在 URL 地址栏后面 ?Id=?
// 去目标组件页
goPage( 数据源 ) {
// 直接调用 $router.push 实现携带参数跳转
this.$router.push({
path: ‘ /目标地址 ’,
query: {
Id: id
...参数
}
})
}