Vue路由傳參頁(yè)面刷新后參數(shù)丟失原因和解決辦法
vue路由傳參方法
在編寫(xiě)vue項(xiàng)目時(shí),時(shí)常會(huì)使用路由在不同頁(yè)面中傳遞參數(shù),常見(jiàn)使用方式如下:
this.$router.push({ path: "/test", query: { a: 1, b: 2 } })
這樣我們就傳遞了兩個(gè)參數(shù),在 /test 頁(yè)面 就可以接收這兩個(gè)參數(shù)
let a = this.$route.query.a; let b = this.$route.query.b;
可以看到瀏覽器進(jìn)行了url參數(shù)拼接傳參,有點(diǎn)像get請(qǐng)求的意思
如果不想顯示參數(shù)拼接在url中,可以使用parmars傳參,同時(shí)path失效,需要用name指定路由,前提vueRouter中有name對(duì)應(yīng)的路由,才能匹配對(duì)應(yīng)的路徑
this.$router.push({ name: "test", params: { a: 1, b: 2 } })
接收參數(shù)方式 與query方式類(lèi)似
let a = this.$route.parmars.a; let b = this.$route.parmars.b;
看起來(lái)有點(diǎn)像post請(qǐng)求
以上看起來(lái)一切正常,但是一旦傳遞的參數(shù)中包含對(duì)象之后,問(wèn)題就出現(xiàn)了
原因分析:
參數(shù)傳遞變?yōu)榱薣object object] ,這個(gè)我們非常熟悉,是對(duì)象被強(qiáng)制轉(zhuǎn)化為字符串的結(jié)果
恍然大悟!原來(lái)vue路由傳值會(huì)把參數(shù)都轉(zhuǎn)換為字符串進(jìn)行拼接,相當(dāng)于String(參數(shù))
解決方案:
解決方案很簡(jiǎn)單,就是使用JSON
傳遞參數(shù)時(shí)將參數(shù)轉(zhuǎn)化為JSON字符串
this.$router.push({ path: "/test", query: { a: JSON.stringify({test : 'test}), b: 2 } })
接收時(shí)再轉(zhuǎn)化為對(duì)象
let a = JSON.parse(this.$route.query.a); let b = this.$routr.query.b;
完美解決
總結(jié)
到此這篇關(guān)于Vue路由傳參頁(yè)面刷新后參數(shù)丟失原因和解決辦法的文章就介紹到這了,更多相關(guān)Vue路由傳參頁(yè)面刷新參數(shù)丟失內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue3+element?Plus使用el-tabs標(biāo)簽頁(yè)解決頁(yè)面刷新不回到默認(rèn)頁(yè)的問(wèn)題
- Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的七種方法總結(jié)
- Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的4種方法舉例
- vue路由傳參之使用query傳參頁(yè)面刷新數(shù)據(jù)丟失問(wèn)題解析
- 單頁(yè)面Vue頁(yè)面刷新出現(xiàn)閃爍問(wèn)題及解決
- 解決vue頁(yè)面刷新產(chǎn)生白屏的問(wèn)題
- Vue實(shí)現(xiàn)父子組件頁(yè)面刷新的幾種常用方法
- vue數(shù)據(jù)變化但頁(yè)面刷新問(wèn)題
- vue?頁(yè)面刷新、重置、更新頁(yè)面所有數(shù)據(jù)的示例代碼
相關(guān)文章
elementUI select組件默認(rèn)選中效果實(shí)現(xiàn)的方法
這篇文章主要介紹了elementUI select組件默認(rèn)選中效果實(shí)現(xiàn)的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03Vue.js中數(shù)組變動(dòng)的檢測(cè)詳解
這篇文章給大家主要介紹了Vue.js中數(shù)組變動(dòng)的檢測(cè),文中給出了詳細(xì)的示例代碼和過(guò)程介紹,相信會(huì)對(duì)大家的理解和學(xué)習(xí)很有幫助,有需要的朋友們下面來(lái)一起看看吧。2016-10-10Vue聲明式導(dǎo)航與編程式導(dǎo)航及導(dǎo)航守衛(wèi)和axios攔截器全面詳細(xì)講解
這篇文章主要介紹了Vue聲明式導(dǎo)航與編程式導(dǎo)航及導(dǎo)航守衛(wèi)和axios攔截器,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-01-01element-ui?tree?異步樹(shù)實(shí)現(xiàn)勾選自動(dòng)展開(kāi)、指定展開(kāi)、指定勾選功能
這篇文章主要介紹了element-ui?tree?異步樹(shù)實(shí)現(xiàn)勾選自動(dòng)展開(kāi)、指定展開(kāi)、指定勾選,項(xiàng)目中用到了vue的element-ui框架,用到了el-tree組件,由于數(shù)據(jù)量很大,使用了數(shù)據(jù)懶加載模式,即異步樹(shù),需要的朋友可以參考下2022-08-08Vue動(dòng)態(tài)設(shè)置el-table操作列的寬度自適應(yīng)
這篇文章主要給大家介紹了關(guān)于Vue如何動(dòng)態(tài)設(shè)置el-table操作列的寬度自適應(yīng),很多頁(yè)面都需要用到表格組件el-table,如果沒(méi)有給el-table-column指定寬度,默認(rèn)情況下會(huì)平均分配給剩余的列,需要的朋友可以參考下2023-07-07Vue3中provide和inject作用和場(chǎng)景
Vue3中provide和inject作用和場(chǎng)景是頂層組件向任意的底層組件傳遞數(shù)據(jù)和方法,實(shí)現(xiàn)跨層組件通信,本文通過(guò)實(shí)例介紹Vue3 provide和inject的相關(guān)知識(shí),感興趣的朋友一起看看吧2023-11-11