页面路由离开的时候弹出一个二次确认框 ‘内容尚未保存 是否确认离开’

beforeRouteLeave就是离开该页面时触发的卫士
当用户的表单还未保存内容就退出或切换路由的时候，可以使用
beforeRouteLeave拦截路由跳转，打出二次确认框

beforeRouteLeave 的三个参数分别是

1. to：要去的页面
2. from： 本页面地址
3. next 下一步

示范代码：

‘beforeRouteLeave.js’

export default {
  data() {
    return {
      leave: false, // 是否离开
      fullPath: '', //离开的路径
      requiresConfirm: true // 是否需要二次确认
    };
  },
  async beforeRouteLeave(to, from, next) {
   // 离开时候会被触发 在这里写业务逻辑
   // leave === true 离开 反则 再去 clickToLeaveToCancel 里判断一次
   // 添加requiresConfirm是因为 提交之后也许需要跳转页面 这时候不需要出现弹框
   // 需要在提交事件 跳转页面之前 this.requiresConfirm=false 设置一下状态
   if(this.requiresConfirm)
    this.leave ? next(true) : await this.clickToLeaveToCancel();
  },
  methods: {
    // 会在点击取消或者路由跳转的时候被触发
    async clickToLeaveToCancel() {
      this.requiresConfirm=true
      // 在 utils里注册一个全局的二次确认弹框 下次分享
      const action = await this.Utils.confirm(`页面信息尚未保存，是否确认退出？`, '确认关闭', { type: 'warning' });
      if (action === 'confirm') {
        this.leave = true;
        // fullPath为空 是取消事件触发返回上一页，否则按照路由记录的地址跳转到对应页面
        if (this.fullPath === '') {
          window.history.back();
        } else {
          this.$router.push(this.fullPath);
        }
      }
    }
  }
};

表单是很多模块都有的 所以我使用了全局混入的办法
mixin如何混入全局的公共方法/参数
在 main.js里面

import gkobalMixinBeforeRouteLeave from '../src/mixin/beforeRouteLeave';
Vue.mixin(gkobalMixinBeforeRouteLeave);

这样就可以在其他页面正常调用 clickToLeaveToCancel 方法了

beforeRouteLeave 是在离开路由前的一些操作，如果不想每个页面都触发。可以不全局引入 单独引入

mixin单独引入的方法

import xxx from '@/mixin/xxx';
mixins:[xxx]

不是全部都需要引入 但是数量较多 不适合单独引入
也可以在beforeRouteLeave里写一个模块名单数组 通过includes自己做判断