快捷導(dǎo)航

vue路由傳參之使用query傳參頁面刷新數(shù)據(jù)丟失問題解析

更新時(shí)間：2023年04月14日 14:53:28 作者：無·糖

這篇文章主要介紹了vue路由傳參使用query傳參頁面刷新數(shù)據(jù)丟失問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

vue路由傳參（使用query傳參頁面刷新數(shù)據(jù)丟失問題）

1. 路由傳參的兩種方式

1. params傳參（刷新頁面數(shù)據(jù)會丟失）

 this.$router.push({
        name:'xxx',
        params:{
          id:id
        }
      })
  
//接收參數(shù):
this.$route.params.id

2. query傳參（刷新數(shù)據(jù)不會丟失）

this.$router.push({
        path:'/xxx',
        query:{
          id:id
        }
      })
  
//接收參數(shù):
this.$route.query.id

2. 使用query傳參頁面刷新數(shù)據(jù)丟失問題

注意

在query傳參的時(shí)候可能會遇到一個(gè)問題：當(dāng)傳遞參數(shù)為對象時(shí)，第一次跳轉(zhuǎn)數(shù)據(jù)是沒問題的，但第二次刷新頁面數(shù)據(jù)會變?yōu)閇object object]

解決辦法：
要跳轉(zhuǎn)的傳參頁：先將數(shù)組轉(zhuǎn)換為字符串。

detailFun(row) {
      //console.log(JSON.stringify(row))
      this.$router.push({
        path: '/product',
        query: { productDetail: JSON.stringify(row) }
      })
},

接收頁面：

 created() {
 	this.orderDetail = JSON.parse(this.$route.query.productDetail)
 }

這樣轉(zhuǎn)換一下刷新后數(shù)據(jù)就不會丟失。

到此這篇關(guān)于vue路由傳參（使用query傳參頁面刷新數(shù)據(jù)丟失問題）的文章就介紹到這了,更多相關(guān)vue路由傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue中marker被識別點(diǎn)擊的過程場景分析
這篇文章主要介紹了vue中marker被識別點(diǎn)擊的過程場景分析,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2023-11-11
Vue3不支持Filters過濾器的問題
這篇文章主要介紹了Vue3不支持Filters過濾器的問題,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-09-09
vue使用mixins優(yōu)化組件
這篇文章主要介紹了vue如何使用mixins優(yōu)化組件，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-04-04
vue3如何定義變量及ref、reactive、toRefs特性說明
這篇文章主要介紹了vue3如何定義變量及ref、reactive、toRefs特性說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue實(shí)現(xiàn)全局的toast組件方式
這篇文章主要介紹了Vue實(shí)現(xiàn)全局的toast組件方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
el-tree懶加載的實(shí)現(xiàn)以及局部刷新方式
這篇文章主要介紹了el-tree懶加載的實(shí)現(xiàn)以及局部刷新方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
詳解vue2與vue3獲取模版引用ref的區(qū)別
這篇文章主要為大家詳細(xì)介紹了vue2與vue3中獲取模版引用ref的方法與區(qū)別,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-10-10
vue實(shí)現(xiàn)圖片加載完成前的loading組件方法
下面小編就為大家分享一篇vue實(shí)現(xiàn)圖片加載完成前的loading組件，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
vue.js 子組件無法獲取父組件store值的解決方式
今天小編就為大家分享一篇vue.js 子組件無法獲取父組件store值的解決方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue操作dom元素的3種方法示例
這篇文章主要給大家介紹了關(guān)于vue操作dom元素的3種方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-09-09