vue中路由參數(shù)傳遞可能會(huì)遇到的坑
前言
vue中路由跳轉(zhuǎn)傳參數(shù)有多種,自己常用的是下面的幾種
- 通過(guò)router-link進(jìn)行跳轉(zhuǎn)
- 通過(guò)編程導(dǎo)航進(jìn)行路由跳轉(zhuǎn)
本文主要給大家介紹了關(guān)于vue路由參數(shù)傳遞遇到的一些坑，分享出來(lái)供大家參考學(xué)習(xí)，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧。
首先我的路由的定義
{
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ì)象則沒有這個(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
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
解決vue 給window添加和移除resize事件遇到的坑
這篇文章主要介紹了解決vue 給window添加和移除resize事件遇到的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
這篇文章主要為大家詳細(xì)介紹了Vue參數(shù)的增刪改實(shí)例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
vue項(xiàng)目中使用html2canvas解決截圖不全的問(wèn)題
本文主要介紹了vue項(xiàng)目中使用html2canvas解決截圖不全的問(wèn)題2023-11-11
Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格功能
這篇文章主要介紹了Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格功能,演示如何在Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
vue addRoutes路由動(dòng)態(tài)加載操作
這篇文章主要介紹了vue addRoutes路由動(dòng)態(tài)加載操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片上傳到后臺(tái)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
Vue中使用JsonView來(lái)展示Json樹的實(shí)例代碼
這篇文章主要介紹了Vue之使用JsonView來(lái)展示Json樹的實(shí)例代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11
Vue3?目前已經(jīng)趨于穩(wěn)定,不少代碼庫(kù)都已經(jīng)開始使用它,很多項(xiàng)目未來(lái)也必然要遷移至Vue3,本文記錄了使用Vue3時(shí)遇到的一些問(wèn)題,希望能對(duì)大家有所幫助2023-09-09
這篇文章主要介紹了vue中$emit的用法詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了VUE 自定義組件模板的方法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js自定義組件模板的相關(guān)步驟與操作技巧,需要的朋友可以參考下2019-08-08