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

創(chuàng)新互聯(lián)專注于富縣企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè),商城網(wǎng)站開發(fā)。富縣網(wǎng)站建設(shè)公司,為富縣等地區(qū)提供建站服務(wù)。全流程按需搭建網(wǎng)站，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

首先我的路由的定義

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

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

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

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

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

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

所以我們修改下代碼：

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

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

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

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