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

2019-11-19 12:35:40

字體：大中小

來源：轉載

供稿：網友

前言

最近公司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('當前頁面數據未保存，確定要離開![image](http://note.youdao.com/favicon.ico)？') if (answer) {  next() } else {  next(false) } }

顯示的提示框如下：

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

但是，這個時候就實現了我們最終的需求了么？并沒有，還有一步：用window.onbeforeunload監聽瀏覽器的刷新事件，當然為了防止從當前單頁面跳到其他頁面之后，在刷新所在新的頁面還會觸發window上的onbeforeunload的問題，我們不僅要及時的添加onbeforeunload事件，更要及時刪除此事件，下面有兩種解決方法可供選擇：

通過判斷它的路由是否是當前需要添加禁止刷新的頁面

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  }}};

在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 }

顯示的提示框如下：