vue路由传参

Vue路由传参
方案一：
  直接调用$router.push实现带参数的跳转
  this.$route.push({
    path:`/url/${id}`
  })
方案一，需要对应路由配置如下：
{ 
   path:'/url/:id'
   name:'name',
   component:Component
}
在path中添加/:id来对应$router.push中path携带的参数。
子组件可以使用来获取传递的参数
this.$router.params.id

方案二：
父组件中：通过路由属性中的name来确定匹配的路由,通过params来传递参数。
  this.$route.push({
    path:'/url/',
    params:{
      id:id       
    } 
  })
对应路由配置：这里可以添加id也可以不添加，不添加数据在URL后面（显示/不显示）
{ 
   path:'/url/:id'
   name:'name',
   component:Component
}
子组件获取参数
this.$route.params.id

方案三：
父组件: 使用path来匹配路由，然后通过query来传递参数
这种情况下query传递的参数会显示在url后面？id =?
  this.$router.push({
    path: '/url',
    query: {
      id: id
    }
  })
  对应路由配置：
{ 
   path:'/url/:id'
   name:'name',
   component:Component
}
对应子组件：这样获取参数
this.$route.query.id

 

来源：https://www.cnblogs.com/xpf123/p/11664582.html