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