1. 程式人生 > >react router @4 和 vue路由 詳解(六)vue怎麼通過路由傳參?

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
複製程式碼