Vue怎么解決router傳遞params參數(shù)在頁面刷新時數(shù)據(jù)丟失問題

本文小編為大家詳細(xì)介紹“Vue怎么解決router傳遞params參數(shù)在頁面刷新時數(shù)據(jù)丟失問題”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“Vue怎么解決router傳遞params參數(shù)在頁面刷新時數(shù)據(jù)丟失問題”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

Vue 項目：如何解決 router 傳遞 params 參數(shù)，在頁面刷新時數(shù)據(jù)丟失

情況是這樣，通常我們會從一個 A 頁面跳轉(zhuǎn)到另一個 B 頁面，如果這兩個頁面存在數(shù)據(jù)交互的話，就會有可能發(fā)生數(shù)據(jù)丟失的情況：

就比如我們 A 頁面有一個按鈕，點擊按鈕將數(shù)據(jù)傳遞給其他頁面：

那接下來我們就可以新建一個 A.vue 文件代碼如下：

<template>

  <button @click="toB">toB</button>

</template>

<script>

export default {

  name: 'A',

  data() {

    row: {

      name: 'A 頁面'

    },

  },

  methods: {

    toB() {

      this.$router.push({

        name: 'B',

        params: {

          row:  this.row

        }

      })

    }

  }

}

</script>

接著就是 B 頁面接受 A 頁面的數(shù)據(jù):

我們可以新建一個 B.vue 頁面：

<template>

  <div>{{row.name}}</div>

</template>

<script>

export default {

  name: 'B',

  props: ['row'],

}

</script>

這里之所以可以使用 props 屬性來接收 row，是因為我們在路由配置文件通過設(shè)置 props 為 true 來開啟了路由參數(shù)解耦：

{

  path: '/B',

  name: 'B',

  props: true,

  component: import('B.vue')

}

但是如果用戶突然刷新了 B 頁面數(shù)據(jù)會丟失，我們一般如何解決呢？大概有三種方法：

第一種：使用 query 查詢的方式傳遞參數(shù)： 在 A 頁面?zhèn)鬟f數(shù)據(jù)：

this.$router.push({

  name: 'B',

  query: {

    row: JSON.stringify(this.row)

  }

})

B 頁面接受數(shù)據(jù)：

<template>

  <div>{{JSON.parse($route.query.row).name}}</div>

</template>

第二種：還是使用 params 傳遞參數(shù)，但是得結(jié)合 localstroage 緩存

比如 A 頁面：

this.$router.push({

  name: 'B',

  params: {

    row: this.row

  }

})

B 頁面接受數(shù)據(jù)： 在 created 生命周期時先緩存數(shù)據(jù)，在頁面銷毀時刪除緩存

export default {

  name: 'B',

  data() {

    return {

      row: null

    }

  },

  created() {

    let rowData = localStorage.getItem('rowData')

    if(rowData) {

      this.row = this.$route.params.row

      localStorage.setItem('rowData', JSON.stringify(this.$route.params.row))

    }

  },

  beforeDestory() {

    localStorage.removeItem('rowData')

  }

}

讀到這里，這篇“Vue怎么解決router傳遞params參數(shù)在頁面刷新時數(shù)據(jù)丟失問題”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。