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

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

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

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

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

那接下來我們就可以新建一個 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 頁面的數據:

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

<template>

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

</template>

<script>

export default {

  name: 'B',

  props: ['row'],

}

</script>

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

{

  path: '/B',

  name: 'B',

  props: true,

  component: import('B.vue')

}

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

第一種：使用 query 查詢的方式傳遞參數： 在 A 頁面傳遞數據：

this.$router.push({

  name: 'B',

  query: {

    row: JSON.stringify(this.row)

  }

})

B 頁面接受數據：

<template>

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

</template>

第二種：還是使用 params 傳遞參數，但是得結合 localstroage 緩存

比如 A 頁面：

this.$router.push({

  name: 'B',

  params: {

    row: this.row

  }

})

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

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參數在頁面刷新時數據丟失問題”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。