一個vue路由引數傳遞的注意點

西門小妖發表於2017-12-07
Vue路由
首先我的路由的定義
{
        path: '/b',
        name: 'B',
        component: resolve => require(['../pages/B.vue'], resolve)
}複製程式碼
我從A元件跳轉到B元件，並通過路由資訊物件傳遞一些引數
this.$router.push({
        path: '/b',
        params: {
          paramA: 'a'      
        },
        query:{
          paramB: 'b'
        }
})複製程式碼
在B元件中獲取引數
this.$route.query.paramB         //b
this.$route.params.paramA        //undefined複製程式碼
通過路由的params物件傳遞過來的引數paramB始終是undefined，始終找不到原因。
通過查閱文件，終於找到原因，那是因為路由的params物件使用，必須要通過路由名來呼叫路由，而不同通過path來呼叫，而query物件則沒有這個要求。所以我們修改下程式碼：
this.$router.push({
        name: 'B',
        params: {
          paramA: 'a'      
        },
        query:{
          paramB: 'b'
        }
})複製程式碼
將path引數換成對應的路由名稱就可以了，這個時候獲取引數就一切正常了。
this.$route.query.paramB         //b
this.$route.params.paramA        //a複製程式碼

相關文章