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

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

  a、通配符传参数

react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
//在定义路由的时候

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

//在使用的时候

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

//接收页面获取值

this.$route.params.id
react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

 

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

react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
//在定义路由的时候

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

//在使用的时候

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

//接收页面获取值

this.$route.params.id
react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

 

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

react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
//在定义路由的时候

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

//在使用的时候

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

//接收页面获取值
this.$route.query.id
react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

相关文章:

  • 2021-11-22
  • 2021-06-16
  • 2022-12-23
  • 2022-01-14
  • 2022-12-23
  • 2021-07-01
  • 2021-07-11
  • 2021-07-11
猜你喜欢
  • 2021-08-11
  • 2021-08-08
  • 2021-09-10
  • 2021-12-15
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案