端技術之：Vue.js應用回退或重新整理介面時提示使用者儲存修改

在實際應用中，運營人員在編輯資料時不希望因不小心點選了瀏覽器的回退或重新整理按鈕導致花費了很長時間編輯的資料丟失。可以採用以下兩種手段防止運營編輯時丟失資料：

• 在運營人員重新整理頁面或回退時，自動保留資料至瀏覽器端本地儲存，在重新進入編輯頁面時再將資料從本地儲存中載入到編輯介面。
• 第二種方法是在運營人員重新整理或回退時，強提示運營人員有修改的資料尚未儲存，詢問是否繼續。

無認採用哪一種方式，在技術實現上，我們需要首先能夠監聽到使用者執行回退或重新整理頁面的動作。

實際上，當使用者執行頁面重新整理時，會觸發 window物件上的 onBeforeUnload事件。所以，我們需要在頁面載入時開始監聽此事件。在Vue.js應用中，我們可以在Vue.js的 mounted生命週期事件函式中開始監聽。

  mounted() {
    window.onbeforeunload = e => {
      if (!this.modified) {
        return;
      }
      // 通知瀏覽器不要執行與事件關聯的預設動作
      e.preventDefault();
      // Chrome 需要 returnValue 被設定成空字串
      e.returnValue = '';
    };
  },

有了以上的程式碼，只要我們在修改了資料以後，將 modified的值改為true，則可以在重新整理整個頁面時彈出如下提示：

當使用者點選上述對話方塊的[ 取消]按鈕後，會取消重新整理動作，當使用者選擇[ 重新載入]後，瀏覽器會強制進行頁面的重新整理。

由於在Vue.js應用中，通常是一個頁面的應用，所有的子頁面享用一個window物件，所以，如果在一個Vue.js頁面元件中增加了對onBeforUnload事件的監聽，則可能會影響其它頁面元件的相關行為，而在其他頁面（如，僅瀏覽資料的頁面）是不希望進行相關的提示的，所以，我們需要在Vue.js元件解除安裝的時候取消對onBeforeUnload事件的監聽。

  destroyed() {
    // 取消對事件的監聽
    window.onbeforeunload = null;
  },

使用者除了通過瀏覽器重新整理操作退出外，還有兩種可能的退出途徑：

• 點選瀏覽器的前進或回退操作按鈕
• 點選單頁面中的前端路由連結

對於以上兩種退出途徑，onBeforeLoad事件通常是攔截不到相應的事件的，因為這兩種操作一般是前端路由的行為。

既然是前端路由的行為，我們就需要在前端路由事件上下功夫。可喜的是，前端路由vue-router為我們提供了 導航守衛的能力。關於vue-router導航守衛的相關知識，大家可以參考： vue-router前端路由導航守衛。

前端路由導航守衛分為全域性守衛、獨享守衛、元件內守衛等。這裡我們使用的是元件內守衛。

元件內守衛有以下三種

• beforeRouteEnter 元件第一次被渲染時呼叫
• beforeRouteUpdate 路由改變但元件被複用時呼叫
• beforeRouteLeave 導航離開元件時呼叫

顯而易見，我們需要監聽並處理 beforeRouteLeave事件。

  beforeRouteLeave(to, from, next) {
    if (!this.modified) {
      next();
      return;
    }
    this.$confirm('當前頁面資料未儲存，確定要離開？', '提示', { type: 'warning' })
      .then(() => {
        next();
      })
      .catch(() => {
        next(false);
      });
  },

有了以上的程式碼，當我們在進行路由切換時（點選瀏覽器回退按鈕或點選頁面中的其它路由連結）就會提示如下的對話方塊：

當使用者選擇取消時，回到原介面，當使用者點選確定按鈕後，頁面強制重新整理。

以上是本人在實際專案應用中遇到的問題及我們採取的解決方案，如果您有更好的方法，或者有更好的建議，歡迎不吝賜教。