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
复制代码

猜你喜欢

转载自www.cnblogs.com/yangyangxxb/p/10074800.html