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

Z时代
2024-01-10
分类：综合

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