快捷導(dǎo)航

Vue路由傳參頁(yè)面刷新后參數(shù)丟失原因和解決辦法

更新時(shí)間：2022年12月13日 11:41:47 作者：lonelysaber

這幾天在開發(fā)中遇見的一個(gè)關(guān)于路由傳參后,頁(yè)面刷新數(shù)據(jù)丟失的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于Vue路由傳參頁(yè)面刷新后參數(shù)丟失原因和解決辦法,需要的朋友可以參考下

vue路由傳參方法

在編寫vue項(xiàng)目時(shí)，時(shí)常會(huì)使用路由在不同頁(yè)面中傳遞參數(shù)，常見使用方式如下：

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方式類似

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)滾動(dòng)加載的表格
在系統(tǒng)開發(fā)中遇到了這么一個(gè)問(wèn)題：后端一次性返回上百條的數(shù)據(jù)，我需要把返回的數(shù)據(jù)全部顯示在表格里，而且甲方爸爸明確指定了表格是不允許使用分頁(yè)的?？墒钱?dāng)使用a-table裝載上百條數(shù)據(jù)時(shí)，頁(yè)面出現(xiàn)了明顯的卡頓現(xiàn)象。只能使用滾動(dòng)加載的方案來(lái)代替了。
2021-06-06
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-03
vue中倒計(jì)時(shí)組件的實(shí)例代碼
這篇文章主要介紹了vue中倒計(jì)時(shí)組件的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-07-07
Vue.js中數(shù)組變動(dòng)的檢測(cè)詳解
這篇文章給大家主要介紹了Vue.js中數(shù)組變動(dòng)的檢測(cè)，文中給出了詳細(xì)的示例代碼和過(guò)程介紹，相信會(huì)對(duì)大家的理解和學(xué)習(xí)很有幫助，有需要的朋友們下面來(lái)一起看看吧。
2016-10-10
Vue聲明式導(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-01
在vant中如何使用dialog彈窗
這篇文章主要介紹了在vant中如何使用dialog彈窗，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
element-ui?tree?異步樹實(shí)現(xiàn)勾選自動(dòng)展開、指定展開、指定勾選功能
這篇文章主要介紹了element-ui?tree?異步樹實(shí)現(xiàn)勾選自動(dòng)展開、指定展開、指定勾選,項(xiàng)目中用到了vue的element-ui框架，用到了el-tree組件，由于數(shù)據(jù)量很大，使用了數(shù)據(jù)懶加載模式，即異步樹，需要的朋友可以參考下
2022-08-08
Vue動(dòng)態(tài)設(shè)置el-table操作列的寬度自適應(yīng)
這篇文章主要給大家介紹了關(guān)于Vue如何動(dòng)態(tài)設(shè)置el-table操作列的寬度自適應(yīng),很多頁(yè)面都需要用到表格組件el-table,如果沒有給el-table-column指定寬度,默認(rèn)情況下會(huì)平均分配給剩余的列,需要的朋友可以參考下
2023-07-07
Vue3中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
Vue實(shí)現(xiàn)全局異常處理的幾種方案
本文主要介紹了使用pyscript在網(wǎng)頁(yè)中撰寫Python程式的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-05-05