使用vue的mixins混入实现对正在编辑的页面离开时提示

mixins.ts

import { Vue, Component, Watch } from "vue-property-decorator"
Component.registerHooks([
    'beforeRouteLeave'
])
@Component
/* 此mixin用来页面离开时编辑提示，
如果组件引入该mixin，那么默认：url改变或者刷新关闭时会给出提示；
如果引入的组件更改url时不需要提示（比如点击保存按钮时），那么需要将showLeaveHint手动置为false */
export class LeaveHintMixin extends Vue {
    showLeaveHint: boolean = true;
    hintMessage: string = '页面中有正在编辑的内容，继续将不会保存';

    /* ---- 函数 ---- */
    showLeaveHintFun(next) {
        if (window.confirm(this.hintMessage)) {
            next();
        } else {
            next(false);
        }
    }

    /* 绑定与解绑浏览器刷新关闭事件 */
    bindBeforeunload() {
        // 点击刷新、关闭按钮，直接通过浏览器给出提示
        window.onbeforeunload = (event) => {
            event.returnValue = this.hintMessage;
            return this.hintMessage;
        };
    }
    unbindBeforeunload() {
        window.onbeforeunload = null;
    }

    /* ---- 生命周期 ---- */
    // 改变url时，给出提示
    beforeRouteLeave(to, from, next) {
        if (this.showLeaveHint) {
            this.showLeaveHintFun(next);
        } else {
            next();
        }
    }
    // 组件渲染完绑定浏览器刷新关闭事件
    mounted() {
        if (this.showLeaveHint) {
            this.bindBeforeunload();
        }
    }
    // 组件摧毁时解绑事件
    beforeDestroy() {
        this.unbindBeforeunload();
    }

    // 添加监控使得组件能够更加灵活控制编辑提示，组件改变showLeaveHint时，便可以绑定或者解绑事件控制提示
    @Watch('showLeaveHint')
    bindClick(val) {
        if (val) {
            this.bindBeforeunload();
        } else {
            this.unbindBeforeunload();
        }
    }
}

使用方法 use.ts

import { Vue, Watch, Component } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import { LeaveHintMixin } from '../../common/mixins'

@Component

export default class Use extends mixins(LeaveHintMixin) {
    //引入mixins.ts默认更改url、刷新、关闭时会给出提示

    showLeaveHint = false; // 这样会覆盖mixins.ts中的showLeaveHint，会改为默认没提示，跟不引入一样

    //后面通过改变this.showLeaveHint 可以控制更改url、刷新、关闭时是否给出提示
}