前言

vue中路由跳轉傳參數有多種,自己常用的是下面的幾種

• 通過router-link進行跳轉
• 通過編程導航進行路由跳轉

本文主要給大家介紹了關于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  //bthis.$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  //bthis.$route.params.paramA //a

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。