​
一、多个页面需要，考虑用mixins混入
（如果只是某个页面需要，直接把混入的代码写到相应的组件即可）

src/mixins/index.js：

export const beforeRouteLeave = require('./beforeRouteLeave').default

src/mixins/beforeRouteLeave.js：

export default {
  data() {
    return {
      // 初始文档拷贝
      ruleFormCopy: {},
      // 离开路由守卫的FLAG
      ifFromNextFlag: false
    }
  },
  methods: {
    compareData() {
      //如果是newAdd为undefined证明不是增加新数据，直接不提示。
      if (this.$route.query.newAdd == undefined) {
        // 目前this.form是组件中的form
        let compare =
          JSON.stringify(this.ruleForm) === JSON.stringify(this.ruleFormCopy)
        return compare
      } else {
        return true
      }
  },
  beforeRouteLeave(to, from, next) {
    const flag = this.compareData()
    // 1、如果在草稿状态下，则进行路由守卫
    if (this.documentState == 0) {
      // 2、如果页面内容不相同，则提示保存
      if (!flag) {
        setTimeout(() => {
          // 做是否离开判断？
          // 还是做是否保存判断？
          this.$confirm('您还未保存页面内容，是否离开当前页面?', '提示', {
            type: 'warning',
            closeOnClickModal: false,
            closeOnPressEscape: false
          })
            .then(() => {
              // 选择确定
              // 1、选择离开
              next()
              // 2、选择保存
              // this.saveDocument('ruleForm', false, 1).then((res) => {
              //   next()
              // })
            })
            .catch(() => {
              // 选择取消
              // this.$message({
              //   message: '',
              //   type: 'info'
              // })
              // next()
            })
        }, 200)
      } else {
        // 如果相同，则直接进入下个页面
        next()
      }
    } else {
      next()
    }
  }
}

如果是关闭页面和刷新页面也需要做提示保存就用 window.onbeforeunload

mounted() {
     window.onbeforeunload = () =>{
            // 此处调用保存的方法
            return 'tips'
        }
  },

混入是可以进行全局注册的，但一旦使用全局混入，它将影响每一个之后创建的 Vue 实例，在这里我们不需要全局引入
在需要的组件中引入、注册

import { beforeRouteLeave } from 'mixins'
mixins: [ beforeRouteLeave ],

使用：
在获取数据和保存数据的方法中，获取数据和保存数据后对ruleFormCopy赋值

// 拷贝一份this.ruleForm，方便对比是新增修改还是尚未修改
this.ruleFormCopy = JSON.parse(JSON.stringify(this.ruleForm))

// 保存后，更新拷贝ruleForm，方便对比是新增修改还是尚未修改
this.ruleFormCopy = JSON.parse(JSON.stringify(this.ruleForm))

注：因为获取数据时接口返回的数据可能和离开页面前的数据结构不一致，可在copy数据时进行处理，也可在beforeRouteLeave.js中去单独比较这个页面的新旧数据
比如某个组件的数据源是formData，一开始copy的数据（获取数据返回的数据）与离开页面前的tempData 数据类型不一致或者字段不一致（比如主要是因为ruleForm中的tempData不一致 ），可在beforeRouteLeave.js中的compareData方法中if里去作比较，比如：

if (this.editor && this.tempData != undefined && this.tempData != this.editor.getContent()) {
  let newRuleForm = this.ruleForm
  newRuleForm = newRuleForm.emailContent.replace(this.tempData, this.editor.getContent())
  return JSON.stringify(newRuleForm) === JSON.stringify(this.ruleFormCopy)
}