Vue页面未保存时离开页面做弹框提示

需求

当用户编辑了当前页面，而没有进行保存， 离开路由时做提示
刷新当前页面或者关闭页面阻止、给一个提示

实现

封装成 mixins 通过 接口 getIsEdited 返回是否编辑过的标识

/**
 * 编辑页面离开提示
 * EditPageLeavePrompt
 *
 * 在使用页面中写入方法 getIsEdited
 */

import {
    MessageBox } from 'element-ui'
export default {
   
  methods: {
   
    /**
     * 接口、获取当前是否已经编辑过的
     * @interface
     */
    getIsEdited() {
    },
    _beforeunloadHandler(event) {
   
      const isEdit = this.getIsEdited && this.getIsEdited()
      if (isEdit) {
   
        event.preventDefault()
        // Chrome requires returnValue to be set.
        event.returnValue