vue-router中query取值的坑及解決
vue-router中query取值的坑
問題描述
在使用 $router.push() 時,使用了query,傳的是Boolean類型的數據,但是query里面的屬性的值都會變成字符串。
this.$router.push({ name:'product', query: {canSee: false} });
query的值是直接從頁面URL中取的,而在頁面URL上的參數的類型只能是字符串類型。
解決方案
1.在傳值之前把要傳的參數單獨放到一個對象里,在放到query里面,然后進行JSON.stringify()處理,到了目標頁面后再進行JSON.parse()處理,還原對象。這種方法的好處是可以一次性處理多個參數,而且適用度高,建議使用這種方法。
2. 傳值前不做處理,到了目標頁面后再單獨對原本為非字符串的數據進行JSON.parse()處理。缺點是字符串類型的數據不能如此處理,要確保該數據不是字符串類型的。局限性大,不推薦適用。
vue-router query,parmas,meta傳參
1.query,顯示在導航欄?后,相當于get請求傳參
this.router.push({path:'/login',query:{ 'redirect':'/home'}}) this.router.push({name:'Login',query:{ 'redirect':'/home'}})
2.parmas,不會顯示,相當于post請求傳參, 目前測試沒有query不行,而且刷新后消失
this.router.push({name:'Login',parmas:{ 'redirect':'/home'}}) this.router.push({name:'Login',query:{ 'redirect':'/home'}},parmas:{ 'redirect':'/home'}})
在vue中使用parmas傳參時必須用name跳轉,而且必須和query一起傳?否則接收不到;或者路由中有設置/:XX來接收這個參數
3.meta,不顯示,測試失敗
this.router.push({name:'Login',meta:{ 'redirect':'/home'}})
總結
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
Vue router-view和router-link的實現原理
這篇文章主要介紹了Vue router-view和router-link的實現原理,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-03-03Vue3 Element Plus el-form表單組件示例詳解
這篇文章主要介紹了Vue3 Element Plus el-form表單組件,Element Plus 是 ElementUI 的升級版,提供了更多的表單控件和功能,同時還改進了一些細節(jié)和樣式,本文結合示例代碼給大家詳細講解,需要的朋友可以參考下2023-04-04