vue组件之嵌套路由传参跳转？

vue组件之嵌套路由传参跳转？

vue 路由传参的三种基本方式：

• 现有场景如下，点击父组件的li 元素，跳转到 子组件，并携带参数，便于子组件获取数据。
  父组件中：

方案1：
去目标组件页

 Methods中：
goPage( 携带参数 ) {
// 直接调用 $router.push 实现携带参数跳转
  this.$router.push({ 
   Path: `/目标页面地址名称/${ 参数 } `
})
}

在目标页面对应路由配置如下：

{
 path: ‘/自己路由地址/:id’,
 name:  ‘ 自己页面名称 ’,
 component:  组件名 
}

项目中实例 ：
在路由处也要做相应处理

父组件中：

在目标页接收传过来的参数：

this.$router.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
...参数
}
})
}