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框架開發(fā)中,有時候我們需要對元素的樣式進(jìn)行動態(tài)控制,比如tab按鈕的切換,下面這篇文章主要給大家介紹了關(guān)于Vue動態(tài)綁定Class的幾種常用方式,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue?3.0?使用ref獲取dom元素,包括vue2.x獲取dom和vue3.0獲取單個dom，通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue移動端屏幕適配，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了Vue項目中實現(xiàn)錨點定位，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue項目刷新當(dāng)前頁面的三種方式(重載當(dāng)前頁面數(shù)據(jù))
這篇文章主要介紹了vue項目刷新當(dāng)前頁面的三種方式(重載當(dāng)前頁面數(shù)據(jù)),本文結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
這篇文章主要為大家介紹了vue組件生命周期鉤子使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪2022-04-04
文章介紹了如何在代理服務(wù)器中配置axios請求,包括單個接口和多個接口的情況,通過配置proxy,可以將請求轉(zhuǎn)發(fā)到不同的后端服務(wù)器,并且可以處理跨域請求和路徑重寫2025-12-12
vue自定v-model實現(xiàn)表單數(shù)據(jù)雙向綁定問題
vue.js的一大功能便是實現(xiàn)數(shù)據(jù)的雙向綁定。這篇文章主要介紹了vue自定v-model實現(xiàn) 表單數(shù)據(jù)雙向綁定的相關(guān)知識，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue實現(xiàn)鼠標(biāo)移入移出事件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
使用element-ui +Vue 解決 table 里包含表單驗證的問題
這篇文章主要介紹了使用element-ui +Vue 解決 table 里包含表單驗證的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07