vue-router中query取值的坑及解決
vue-router中query取值的坑
問題描述
在使用 $router.push() 時，使用了query，傳的是Boolean類型的數(shù)據(jù)，但是query里面的屬性的值都會變成字符串。
this.$router.push({ name:'product', query: {canSee: false} });query的值是直接從頁面URL中取的，而在頁面URL上的參數(shù)的類型只能是字符串類型。
解決方案
1.在傳值之前把要傳的參數(shù)單獨放到一個對象里，在放到query里面，然后進(jìn)行JSON.stringify()處理，到了目標(biāo)頁面后再進(jìn)行JSON.parse()處理，還原對象。這種方法的好處是可以一次性處理多個參數(shù)，而且適用度高，建議使用這種方法。
2. 傳值前不做處理，到了目標(biāo)頁面后再單獨對原本為非字符串的數(shù)據(jù)進(jìn)行JSON.parse()處理。缺點是字符串類型的數(shù)據(jù)不能如此處理，要確保該數(shù)據(jù)不是字符串類型的。局限性大，不推薦適用。
vue-router query,parmas,meta傳參
1.query，顯示在導(dǎo)航欄？后，相當(dāng)于get請求傳參
this.router.push({path:'/login',query:{ 'redirect':'/home'}})
this.router.push({name:'Login',query:{ 'redirect':'/home'}})2.parmas，不會顯示，相當(dāng)于post請求傳參， 目前測試沒有query不行，而且刷新后消失
this.router.push({name:'Login',parmas:{ 'redirect':'/home'}})
this.router.push({name:'Login',query:{ 'redirect':'/home'}},parmas:{ 'redirect':'/home'}})在vue中使用parmas傳參時必須用name跳轉(zhuǎn)，而且必須和query一起傳？否則接收不到；或者路由中有設(shè)置/:XX來接收這個參數(shù)
3.meta，不顯示，測試失敗
this.router.push({name:'Login',meta:{ 'redirect':'/home'}}) 總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue無后端配合實現(xiàn)導(dǎo)出功能的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何在無后端配合的情況下實現(xiàn)導(dǎo)出功能,文中的示例代碼簡潔易懂,有需要的小伙伴可以跟隨小編一起了解一下2024-01-01
下面小編就為大家分享一篇Vue 攔截器對token過期處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01
Vue router-view和router-link的實現(xiàn)原理
這篇文章主要介紹了Vue router-view和router-link的實現(xiàn)原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要給大家介紹了關(guān)于如何啟動node.js文件的3個方法,文中通過圖文以及實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07
在Vue中我們可以使用ref屬性來獲取子組件的實例對象,這個功能非常方便,這篇文章主要給大家介紹了關(guān)于Vue獲取子組件實例對象ref屬性的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
3分鐘了解vue數(shù)據(jù)劫持的原理實現(xiàn)
這篇文章主要介紹了3分鐘了解vue數(shù)據(jù)劫持的原理實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vue3 Element Plus el-form表單組件示例詳解
這篇文章主要介紹了Vue3 Element Plus el-form表單組件,Element Plus 是 ElementUI 的升級版，提供了更多的表單控件和功能，同時還改進(jìn)了一些細(xì)節(jié)和樣式，本文結(jié)合示例代碼給大家詳細(xì)講解，需要的朋友可以參考下2023-04-04
單向數(shù)據(jù)流方式使用一個上傳數(shù)據(jù)流和一個下傳數(shù)據(jù)流進(jìn)行雙向數(shù)據(jù)通信,兩個數(shù)據(jù)流之間相互獨立,下面這篇文章主要給大家介紹了關(guān)于vue單向數(shù)據(jù)流的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)移動端返回頂部，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
基于vue實現(xiàn)8小時帶刻度的時間軸根據(jù)當(dāng)前時間實時定位功能
這篇文章主要介紹了基于vue實現(xiàn)8小時帶刻度的時間軸根據(jù)當(dāng)前時間實時定位功能,開始時間、結(jié)束時間可配置，根據(jù)當(dāng)前時間初始化位置，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05