react router @4 和 vue路由 详解(六)vue怎么通过路由传参？

完整版：https://www.cnblogs.com/yangyangxxb/p/10066650.html

8、vue怎么通过路由传参？

　　a、通配符传参数

//在定义路由的时候

{
     path: '/describe/:id',
     name: 'Describe',
     component: Describe
}

//在使用的时候

this.$router.push({
       path: `/describe/${id}`,
})

//接收页面获取值

this.$route.params.id

 

　　b、params传参，跳转的时候不会显示在url上

//在定义路由的时候

{
     path: '/describe',
     name: 'Describe',
     component: Describe
}

//在使用的时候

this.$router.push({
      name: 'Describe',
      params: {
            id: id
      }
})

//接收页面获取值

this.$route.params.id

 

　　c、query传参，传餐的时候在url显示? key=value & key=value

//在定义路由的时候

   {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }

//在使用的时候

 this.$router.push({
          path: '/describe',
          query: {
            id: id
          }
 })

//接收页面获取值
this.$route.query.id