移動端 無法監聽 頁面刷新或關閉 beforeunload無效 解決方案

解決思路

通過監聽頁面刷新或者關閉來將vuex里面的數據保存到sessionStorage里，在頁面加載時讀取sessionStorage里的狀態信息，更新vuex的數據。

created () {
      //在頁面加載時讀取sessionStorage里的狀態信息
      if (sessionStorage.getItem("store") ) {
          this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
      }
      //在頁面刷新時將vuex里的信息保存到sessionStorage里
      // window.addEventListener("beforeunload",()=>{    // 修改之前監聽beforeunload方法
      window.addEventListener("pagehide",()=>{
          sessionStorage.setItem("store",JSON.stringify(this.$store.state))
      })
    },

將 beforeunload 替換成 pagehide 就能解決這個問題 

補充說明

1、pageshow事件：這個事件在用戶瀏覽網頁時觸發，pageshow 事件類似於 onload 事件，onload 事件在頁面第一次加載時觸發， pageshow 事件在每次加載頁面時觸發，即 onload 事件在頁面從瀏覽器緩存中讀取時不觸發。
2、pagehide事件：該事件會在用戶離開網頁時觸發。離開網頁有多種方式。如點擊一個鏈接，刷新頁面，提交表單，關閉瀏覽器等。pagehide 事件有時可以替代 unload事件，但 unload 事件觸發后無法緩存頁面。

 

參考 跳轉 寫在自己博客只是為了方便自己瀏覽