vue中路由參數(shù)傳遞的示例分析

發(fā)布時(shí)間：2021-08-21 14:48:08 來源：億速云閱讀：189 作者：小新欄目：web開發(fā)

這篇文章主要為大家展示了“vue中路由參數(shù)傳遞的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue中路由參數(shù)傳遞的示例分析”這篇文章吧。

首先我的路由的定義

{
 path: '/b',
 name: 'B',
 component: resolve => require(['../pages/B.vue'], resolve)
}

我從A組件跳轉(zhuǎn)到B組件，并通過路由信息對象傳遞一些參數(shù)

this.$router.push({
 path: '/b',
 params: {
  paramA: 'a' 
 },
 query:{
  paramB: 'b'
 }
})

在B組件中獲取參數(shù)

this.$route.query.paramB  //b
this.$route.params.paramA //undefined

通過路由的params對象傳遞過來的參數(shù)paramB始終是undefined，始終找不到原因。通過查閱資料，終于找到原因，那是因?yàn)槁酚傻膒arams對象使用，必須要通過路由名來調(diào)用路由，而不同通過path來調(diào)用，而query對象則沒有這個(gè)要求。

所以我們修改下代碼：

this.$router.push({
 name: 'B',
 params: {
  paramA: 'a' 
 },
 query:{
  paramB: 'b'
 }
})

將path參數(shù)換成對應(yīng)的路由名稱就可以了，這個(gè)時(shí)候獲取參數(shù)就一切正常了。

this.$route.query.paramB  //b
this.$route.params.paramA //a

以上是“vue中路由參數(shù)傳遞的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

猜你喜歡