一個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複製代碼