(轉)一個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

 

作者：西門小妖
鏈接：https://juejin.im/post/5a28a5bdf265da4311201909
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。