1. 程式人生 > >vue-router 跳轉頁面傳遞引數並獲取引數

vue-router 跳轉頁面傳遞引數並獲取引數

一、跳轉頁面

   有些時候我們從A頁面跳轉到B頁面需要傳遞一個或多個引數,例如從列表頁進入詳情頁

   程式碼:

 <router-link :to="{path:'/detail',query:{id:item.id,a:1}}">{{item.title}}</router-link>

path:要跳入頁面的路徑

query: 就是想要傳遞的引數,可以為一個也可以多個。這樣路徑就會被渲染成這樣

二、獲取引數

使用 this.$router.query 即可獲取到傳遞的引數 

例如獲取上圖中位址列的引數:

   tab: _this.$route.query.tab,
   a:_this.$route.query.a,

這樣就能獲取到引數,返回的是一個key/Value的物件,this.$router.query.a ==1,若沒有,則返回一個空物件

需要注意的是:

1、在方法中使用 this.$router.query 可能得到undefined。因為這個this可能指代的是該方法中的,而不是vue的,所以需要將this

重回賦給一個變數代替就可以獲得

 

若有不正確的地方,請指正。謝謝