vue使用query傳參頁面刷新數(shù)據(jù)丟失怎么解決

本篇內(nèi)容介紹了“vue使用query傳參頁面刷新數(shù)據(jù)丟失怎么解決”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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

1. 路由傳參的兩種方式

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

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

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

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

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

注意

在query傳參的時(shí)候可能會(huì)遇到一個(gè)問題：當(dāng)傳遞參數(shù)為對象時(shí)，第一次跳轉(zhuǎn)數(shù)據(jù)是沒問題的，但第二次刷新頁面數(shù)據(jù)會(huì)變?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ù)就不會(huì)丟失。

“vue使用query傳參頁面刷新數(shù)據(jù)丟失怎么解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！