Vue路由傳參頁面刷新后參數(shù)丟失原因和解決辦法
vue路由傳參方法
在編寫vue項目時，時常會使用路由在不同頁面中傳遞參數(shù)，常見使用方式如下：
this.$router.push({
path: "/test",
query: {
a: 1,
b: 2
}
})這樣我們就傳遞了兩個參數(shù)，在 /test 頁面 就可以接收這兩個參數(shù)
let a = this.$route.query.a; let b = this.$route.query.b;
可以看到瀏覽器進(jìn)行了url參數(shù)拼接傳參，有點像get請求的意思
如果不想顯示參數(shù)拼接在url中，可以使用parmars傳參，同時path失效，需要用name指定路由，前提vueRouter中有name對應(yīng)的路由，才能匹配對應(yīng)的路徑
this.$router.push({
name: "test",
params: {
a: 1,
b: 2
}
})接收參數(shù)方式 與query方式類似
let a = this.$route.parmars.a; let b = this.$route.parmars.b;
看起來有點像post請求
以上看起來一切正常，但是一旦傳遞的參數(shù)中包含對象之后，問題就出現(xiàn)了
原因分析：
參數(shù)傳遞變?yōu)榱薣object object] ，這個我們非常熟悉，是對象被強(qiáng)制轉(zhuǎn)化為字符串的結(jié)果
恍然大悟！原來vue路由傳值會把參數(shù)都轉(zhuǎn)換為字符串進(jìn)行拼接,相當(dāng)于String(參數(shù))
解決方案：
解決方案很簡單，就是使用JSON
傳遞參數(shù)時將參數(shù)轉(zhuǎn)化為JSON字符串
this.$router.push({
path: "/test",
query: {
a: JSON.stringify({test : 'test}),
b: 2
}
})接收時再轉(zhuǎn)化為對象
let a = JSON.parse(this.$route.query.a); let b = this.$routr.query.b;
完美解決
總結(jié)
到此這篇關(guān)于Vue路由傳參頁面刷新后參數(shù)丟失原因和解決辦法的文章就介紹到這了,更多相關(guān)Vue路由傳參頁面刷新參數(shù)丟失內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue mock.js模擬數(shù)據(jù)實現(xiàn)首頁導(dǎo)航與左側(cè)菜單功能
這篇文章主要介紹了Vue mock.js模擬數(shù)據(jù)實現(xiàn)首頁導(dǎo)航與左側(cè)菜單功能，mockjs是用來模擬產(chǎn)生一些虛擬的數(shù)據(jù)，可以讓前端在后端接口還沒有開發(fā)出來時獨立開發(fā)。我們可以使用真實的url，mockjs可以攔截ajax請求，返回設(shè)定好的數(shù)據(jù)2022-09-09
在開發(fā)Vue項目的時候,有時需要使用一些非ES6格式的沒有export的js庫,下面這篇文章主要給大家介紹了關(guān)于Vue中引入第三方JS庫的詳細(xì)步驟,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了快速修改antd?vue單個組件的默認(rèn)樣式方式，具有很好的參考價值，希望對大家有所幫助。2022-08-08
vue 使用 v-model 雙向綁定父子組件的值遇見的問題及解決方案
這篇文章主要介紹了vue 使用 v-model 雙向綁定父子組件的值遇見的問題及解決方案，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
這篇文章主要為大家詳細(xì)介紹了基于Vue.js實現(xiàn)tab滑塊效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
今天小編就為大家分享一篇vue獲取data數(shù)據(jù)改變前后的值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
Vue3+Vue Router實現(xiàn)動態(tài)路由導(dǎo)航的示例代碼
隨著單頁面應(yīng)用程序(SPA)的日益流行,前端開發(fā)逐漸向復(fù)雜且交互性強(qiáng)的方向發(fā)展,在這個過程中,Vue.js及其生態(tài)圈的工具（如Vue Router）為我們提供了強(qiáng)大的支持,本文將介紹如何在Vue 3中使用Vue Router實現(xiàn)動態(tài)路由導(dǎo)航,需要的朋友可以參考下2024-08-08
vue深度監(jiān)聽(監(jiān)聽對象和數(shù)組的改變)與立即執(zhí)行監(jiān)聽實例
這篇文章主要介紹了vue深度監(jiān)聽(監(jiān)聽對象和數(shù)組的改變)與立即執(zhí)行監(jiān)聽實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要為大家詳細(xì)介紹了vue項目實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了Vue中Vue.extend()的使用及解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10