vue路由傳參刷新后數(shù)據(jù)丟失

出現(xiàn)刷新后數(shù)據(jù)丟失的情況可分為：

• 1、路由傳參；
• 2、從vuex獲取參數(shù)

首先說一下：

1、路由傳參

路由傳參可分為query傳參和params傳參

（1）、query傳參，參數(shù)會在地址欄中顯示，如果你傳的是字符串，刷新后頁面的數(shù)據(jù)是不會丟失的，如果傳的是對象或者是數(shù)組，那么刷新后，頁面的數(shù)據(jù)就會丟失，此時解決的方法是，將復(fù)雜數(shù)據(jù)類型，傳的時候轉(zhuǎn)化成字符串，子組件接受的時候再轉(zhuǎn)化過來，這樣刷新后就不會丟失啦

（2）、params傳參，無論是你參數(shù)是字符串還是復(fù)雜數(shù)據(jù)類型，刷新后子組件的頁面數(shù)據(jù)都會丟失

解決辦法：

使用params中的路由匹配

使用方式：在router.js，即匹配路由規(guī)則的位置，加上占位符即可

{
  path: '/index/:num/:name',
  name: 'index',
  component: Index
}

params中的參數(shù)名稱需要和占位符的名稱一致即可

獲取參數(shù)，還是和獲取params中參數(shù)一致：this.$route.params.name

這樣的話，參數(shù)就會出現(xiàn)在url中，格式為：url/num/name，這種方式將參數(shù)放在url上，刷新的時候才不會丟失數(shù)據(jù)。

綜上所述，自己的出的一個小結(jié)論：

如果不使用其他方法，只是路由傳參，要想刷新后數(shù)據(jù)不丟失，

你的參數(shù)就要出現(xiàn)再url地址中，雖然params傳遞的參數(shù)不出現(xiàn)在url地址，

但是要想解決params傳參數(shù)據(jù)刷新不丟失，還得把參數(shù)出現(xiàn)在url地址欄中

2、從vuex獲取參數(shù)

頁面刷新store.state中的數(shù)據(jù)消失是不可避免的，那么使用localStorage來避免這個問題。

發(fā)現(xiàn)問題的時候我就考慮到存數(shù)據(jù)在localStorage里，但是一個一個數(shù)據(jù)添加實在是太蠢了。

那么就需要一個全局的方法來，將store的數(shù)據(jù)存儲在localStorage里。

具體的方法也是百度的很好用，也很方便。

在App.vue中，created初始化生命周期中寫入以下方法

自己項目中使用的方法

//在頁面加載時讀取sessionStorage里的狀態(tài)信息
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem('store'))
        )
      )
    }
    //在頁面刷新時將vuex里的信息保存到sessionStorage里

    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })

作者的方法

//在頁面刷新時將vuex里的信息保存到localStorage里
window.addEventListener("beforeunload",()=>{
  localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
})
 
//在頁面加載時讀取localStorage里的狀態(tài)信息
localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));

兩種方法基本一致

最后說一下，為什么vuex刷新后數(shù)據(jù)會丟失：

其實很簡單，因為store里的數(shù)據(jù)是保存在運行內(nèi)存中的,當(dāng)頁面刷新時，頁面會重新加載vue實例，store里面的數(shù)據(jù)就會被重新賦值

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論