vue中路由參數(shù)傳遞可能會遇到的坑

前言

vue中路由跳轉(zhuǎn)傳參數(shù)有多種,自己常用的是下面的幾種

本文主要給大家介紹了關(guān)于vue路由參數(shù)傳遞遇到的一些坑，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細的介紹吧。

首先我的路由的定義

{
 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，始終找不到原因。通過查閱資料，終于找到原因，那是因為路由的params對象使用，必須要通過路由名來調(diào)用路由，而不同通過path來調(diào)用，而query對象則沒有這個要求。

所以我們修改下代碼：

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

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

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

總結(jié)

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com