Vue實現離開頁面二次確認

在項目開發中遇到用戶編輯內容后未保存推出編輯頁面時需要提示用戶“當前數據未保存，是否退出”，實際開發中利用window.onbeforeunload方法與vue.$on方法在updated生命周期函數中做出相的判斷，做出相應的操作。

准備

onbeforeunload 事件

在即將離開當前頁面(刷新或關閉)時執行JavaScript

• onbeforeunload 事件在即將離開當前頁面(刷新或關閉)時觸發
• 該事件可用於彈出對話框，提示用戶是繼續瀏覽頁面還是離開當前頁面
• 對話框默認的提示信息根據不同的瀏覽器有所不同，標准的信息類似 "確定要離開此頁嗎？"。該信息不能刪除。
• 可以自定義一些消息提示與標准信息一起顯示在對話框。

<element onbeforeunload="myScript">
object.onbeforeunload=function(){myScript};
object.addEventListener("beforeunload", myScript);

vm.$on( event, callback )

參數：

• {string | Array } event (數組只在 2.2.0+ 中支持)
• {Function} callback

用法：

• 監聽當前實例上的自定義事件。事件可以由 vm.$emit 觸發。
• 回調函數會接收所有傳入事件觸發函數的額外參數。

示例：

vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"

步驟

第一步：創建方法在common.js下新建leaveConfirm方法並且默認暴露 export default{}

• @param {Component} vm vue實例
• @param {Function} fn 生效條件，返回布爾值
• @param {String} tip 離開頁面提示語

leaveConfirm(
    vm,
    fn = () => {
        return false;
    },
    tip = "當前頁面數據未保存，確認離開？"
) {
    _leaveConfirmVm = vm;
    vm.$on("hook:updated", () => {
        window.onbeforeunload = function (event) {
            if (fn(vm)) {
                event = event || window.event;
                if (event) {
                    event.preventDefault();
                    event.returnValue = "關閉提示";
                }
                return "關閉提示";
            } else {
                return null;
            }
        };
    });
    //組件銷毀后移出onbeforeunload事件
    vm.$on("hook:beforeDestroy", () => {
        window.onbeforeunload = null;
        router.beforeResolve = () => {};
    });
    //增加路由攔截，執行完next()后需要將beforeResolve重置
    router.beforeResolve((to, from, next) => {
        if (fn(_leaveConfirmVm)) {
            const answer = window.confirm(tip);
            answer ? next() : next(false);
        } else {
            next();
        }
    });
},

第二步：在main.js將其掛載在vue原型上(需要引入leaveConfirm方法)

import common from './utils'
Vue.prototype.$leaveConfirm = common.leaveConfirm

第三步：在vue組件中使用

this.$leaveConfirm(this,(vm)= >{
    return (
    	!vm.btnLoading &&
         JSON.stringify(vm.inirParams) !== JSON.stringfiy(vm.params)
    )
    //可自行設置判斷條件
})

總結

這只是其中的一種實現方式，也可以結合一些ui插件（elementui等）做出更多的效果。如有不足之處，請留下你的意見。