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({
    name:'name',
    params:{
      id:id       
    } 
  })

对应路由配置：这里可以添加id也可以不添加，不添加数据在URL后面（显示/不显示）

{ 
   path:'/url/:id'
   name:'name',
   component:Component
}

传递多个参数

{ 
   path:'/url/:id/:xxxx/:xxxx'
   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