使用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、刷新、关闭时是否给出提示
 }