vue單頁面：當前頁面刷新或跳轉時提示保存

前言

最近公司vue項目中有一個需求，須要在當前頁面刷新或跳轉時提示保存並可取消刷新，以防止填寫的表單內容丟失。剛開始思考以爲很簡單，直接在Router的鉤子中判斷就行了，可是會發現還有新的問題存在，瀏覽器刷新和當前頁面關閉的時候沒法監聽，最終用window.onbeforeunload成功解決，因此用這篇文章簡單記錄下整個解決過程。

vue-Router的鉤子：

路由鉤子能夠分爲全局的，單個路由獨享的以及組件級別的，解決上述需求只用到了組件級別的路由鉤子，因此本文只介紹組件級別的路由鉤子，全局的和單個路由獨享的路由鉤子有須要的同窗能夠去vue-router官網查看介紹：

組件級別路由鉤子分爲三種：

• beforeRouteEnter：當成功獲取並能進入路由(在渲染該組件的對應路由被 confirm 前)
• beforeRouteUpdate：在當前路由改變，可是該組件被複用時調用
• beforeRouteLeave：導航離開該組件的對應路由時調用

具體的介紹和寫法以下：

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染該組件的對應路由被 confirm 前調用
    // 不！能！獲取組件實例 `this`
    // 由於當守衛執行前，組件實例還沒被建立
    // 能夠經過傳一個回調給 next來訪問組件實例
    next(vm => { 
            // 經過 `vm` 訪問組件實例
        })
  },
  beforeRouteUpdate (to, from, next) {
    // 在當前路由改變，可是該組件被複用時調用
    // 舉例來講，對於一個帶有動態參數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
    // 因爲會渲染一樣的 Foo 組件，所以組件實例會被複用。而這個鉤子就會在這個狀況下被調用。
    // 能夠訪問組件實例 `this`
    // 不支持傳遞迴調(由於this實例已經建立能夠獲取到，因此不必)
    next()
  },
  beforeRouteLeave (to, from, next) {
    // 導航離開該組件的對應路由時調用
    // 能夠訪問組件實例 `this`
    // 該導航能夠經過 next(false) 來取消。
    const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
    if (answer) {
        next()
    } else {
    // 不支持傳遞迴調(由於this實例已經建立能夠獲取到，因此不必)
        next(false)
    }
  }
}

注意：在刷新當前頁面時候，beforeRouteLeave不會觸發，它只在進入到其餘頁面時候纔會觸發，可是beforeRouteEnter會在刷新的時候觸發。

經過beforeRouteLeave這個路由鉤子，咱們就能夠在用戶要離開此頁面時候進行提示了！

beforeRouteLeave (to, from, next) {
    const answer = window.confirm('當前頁面數據未保存，肯定要離開？')
    if (answer) {
        next()
    } else {
        next(false)
    }
  }

顯示的提示框以下：

監聽瀏覽器的刷新、頁面關閉事件

可是，這個時候就實現了咱們最終的需求了麼？並無，還有一步：用window.onbeforeunload監聽瀏覽器的刷新事件，固然爲了防止從當前單頁面跳到其餘頁面以後，在刷新所在新的頁面還會觸發window上的onbeforeunload的問題，咱們不只要及時的添加onbeforeunload事件，更要及時刪除此事件，下面有兩種解決方法可供選擇：

1. 經過判斷它的路由是不是當前須要添加禁止刷新的頁面

mounted() {
    window.onbeforeunload = function (e) {
      if(_this.$route.fullPath =="/layout/add"){
          e = e || window.event;
          // 兼容IE8和Firefox 4以前的版本
          if (e) {
            e.returnValue = '關閉提示';
          }
          // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
          return '關閉提示';
      }else{
        window.onbeforeunload =null
      }
}
};

1. 在destory或者beforeDestory的生命週期中直接將onbeforeunload事件置空

mounted() {
    window.onbeforeunload = function (e) {
        e = e || window.event;
        // 兼容IE8和Firefox 4以前的版本
        if (e) {
            e.returnValue = '關閉提示';
        }
        // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
        return '關閉提示';
    }
};
destroyed() {
      window.onbeforeunload = null
    }

顯示的提示框以下：

總結

最終，在beforeRouteLeave和onbeforeunload的共同做用下，這個刷新、跳轉或者關閉等狀況下須要提示保存的需求完美解決！可是，還有一點點小遺憾，就是onbeforeunload中彈框的自定義提示語設置始終沒法生效，你們要是有更加合適的處理辦法，歡迎多多交流指正！