vue中路由參數(shù)傳遞可能會遇到的坑
更新時間：2017年12月07日 11:20:30 作者：西門小妖
這篇文章主要給大家介紹了關(guān)于vue中路由參數(shù)傳遞遇到的坑的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(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í)，下面話不多說了，來一起看看詳細(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)文章
elementUI table表格動態(tài)合并的示例代碼
這篇文章主要介紹了elementUI table表格動態(tài)合并的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
本文主要介紹了vue中三種不同插槽使用小結(jié)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
如果項目中多個組件都使用到WebSocket請求,那么我們需要對WebSocket進行封裝,方便我們使用,下面這篇文章主要給大家介紹了關(guān)于Vue2和Vue3中如何使用WebSocker封裝的相關(guān)資料,需要的朋友可以參考下2024-07-07
vue中?根據(jù)判斷條件添加一個或多個style及class的寫法小結(jié)
這篇文章主要介紹了vue中?根據(jù)判斷條件添加一個或多個style及class的寫法,文中給大家補充介紹了關(guān)于vue里:class的使用結(jié)合自己的實現(xiàn)給大家講解，需要的朋友可以參考下2023-03-03
vue2和vue3的組件封裝還是有區(qū)別,下面這篇文章主要給大家介紹了關(guān)于Vue3如何封裝組件的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-02-02
provide和inject在Vue 2中已經(jīng)被廣泛應(yīng)用，不是新鮮API，3.0重新認(rèn)識一下它們兩個，本文重點給大家介紹vue3中provide和inject的使用，需要的朋友參考下吧2021-07-07
今天小編就為大家分享一篇vuex管理狀態(tài) 刷新頁面保持不被清空的解決方案，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue Echarts實現(xiàn)可視化世界地圖代碼實例
這篇文章主要介紹了Vue Echarts實現(xiàn)可視化世界地圖，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
利用vue-router實現(xiàn)二級菜單內(nèi)容轉(zhuǎn)換
這篇文章主要介紹了如何利用vue-router實現(xiàn)二級菜單內(nèi)容轉(zhuǎn)換,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
vue中使用animate.css實現(xiàn)炫酷動畫效果
這篇文章主要介紹了vue中使用animate.css實現(xiàn)動畫效果,我們使用它，只需要寫很少的代碼，就可以實現(xiàn)非常炫酷的動畫效果，感興趣的朋友跟隨小編一起看看吧2022-04-04