【開發筆記】VUE 框架實作介入使用者離開或關閉頁面

Web app 雖然也是蛻變自 Web page，但是使用者與頁面在互動上卻是有很大的不同。例如離開或是關閉頁面時，根據 App 運行的狀況，給予適度的提醒來避免中斷未完成的工作。

使用者離開頁面時

在一般標準的情況，VUE 的頁面跳轉都是藉由 Vue Router 來實現。因此透過導航守衛（Navigation Guards）可以很容易地攔截使用者離開頁面的相關操作。

而攔截使用者離開頁面的方式分為全域（例如：router.beforeEach），或是元件內的 Hooks 來實現。阿柴自己是比較偏好元件內的 beforeRouteLeave，因為邏輯上會比較單純。

beforeRouteLeave(to, from, next) {
   const count = this.items
    .filter((item) => {
      return !item.done || item.failed
    }).length;
  if (count > 0) {
    const answer = window.confirm('確定要離開嗎？');
    if (!answer) {
      return false;
    }
  }
  next();
},
mounted() { ... },
created() { ... },

使用者關閉頁面時

至於攔截使用者關閉頁面的時機，阿柴試過了 beforeUnmount（3.0）和 beforeDestroy（2.x）都沒有得到很好的效果。後來是透過訂閱事件 beforeunload 來實現。

created() {
  window.addEventListener("beforeunload", this.beforeWindowUnload);
},
beforeDestroy() {
  window.removeEventListener("beforeunload", this.beforeWindowUnload);
},
methods: {
  beforeWindowUnload(e) {
    e.preventDefault();
    e.returnValue = "";
  },
}