vue之路由传参

通过路由传递参数在我们开发vue的项目中是经常使用到的，下面针对路由传递参数做一个简单的总结，路由传递参数一共有三种方式

1.路由配置

{
  path:'/search',
  name:'search',
  component:search  
}

实现路由跳转

this.$router.push{
      path:'search',
      params:{id:id}
}    

组件获取路由参数的方式$route.params.id

2.路由配置

{
  path:'/search/:id',
  name:'search',
  component:search  
}

实现路由跳转

this.$router.push{
      path:'search/{$id}',
}  

组件获取路由参数的方式$route.params.id,这种方式传递参数会在链接后面拼接URL?id=

3.路由配置

{
  path:'/search',
  name:'search',
  component:search  
}

实现路由跳转

this.$router.push{
      path:'search',
      query:{id:id}
}  

组件获取路由参数的方式$route.query.id,使用query传递参数会在链接的后面拼接URL？id=