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