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