前言
最近公司vue項目中有一個需求，需要在當前頁面刷新或跳轉時提示保存并可取消刷新，以防止填寫的表單內容丟失。剛開始思考覺得很簡單，直接在Router的鉤子中判斷就好了，但是會發現還有新的問題存在，瀏覽器刷新和當前頁面關閉的時候無法監聽，最終用window.onbeforeunload成功解決，所以用這篇文章簡單記錄下整個解決過程。
vue-Router的鉤子：
路由鉤子可以分為全局的，單個路由獨享的以及組件級別的，解決上述需求只用到了組件級別的路由鉤子，所以本文只介紹組件級別的路由鉤子，全局的和單個路由獨享的路由鉤子有需要的同學可以去vue-router官網查看介紹：
組件級別路由鉤子分為三種：
具體的介紹和寫法如下：
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事件，更要及時刪除此事件，下面有兩種解決方法可供選擇：
通過判斷它的路由是否是當前需要添加禁止刷新的頁面
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
}
顯示的提示框如下：
總結
最終，在beforeRouteLeave和onbeforeunload的共同作用下，這個刷新、跳轉或者關閉等情況下需要提示保存的需求完美解決！但是，還有一點點小遺憾，就是onbeforeunload中彈框的自定義提示語設置始終無法生效，大家要是有更加合適的處理辦法，歡迎多多交流指正！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
