vue离开当前路由时，若有未保存数据，提示用户是否离开？

一、背景

作为一名专业的产品经理，肯定会有这样的需求。当用户正在编辑表单，一个不小心点到了其他路由，眼看着要离开，他到底是发自内心想放弃，还是手滑？所以弹个提醒问问他，这是你真实意愿吗？（如果微博点赞也有确认框，那娱乐圈的各位大大们就没有手滑声明了\（￣︶￣）/ ）

场景二：当从有分页器和筛选条件的列表页，好不容易筛选出了20条数据，点进一个详情再返回时，发现刚才辛苦选择的筛选条件都置空了！！！想骂...不能骂要文明！

这时，就需要我们来做点啥子了

二、vue-router 导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

上述两种情况，使用组件级的导航守卫就可以。

情景一：

页面保存isEdit字段，当表单信息有更新时，将isEdit更新为true。 路由即将离开时，提醒用户：

beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    if (this.isEdit) {
      const h = this.$createElement;
      this.$msgbox({
        title: '',
        message: h('div', null, [
          h('span', { style: 'color: #00BAFF' }, '您在页面编辑了未保存，是否确认离开'),
          h('div', { style: 'color: #999' }, '注意：点击确认之后编辑不会生效'),
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            done(); // 隐藏确认框
            next(); // 向下执行
          } else {
            done(); // 隐藏确认框
          }
        },
      });
    } else {
      next();
    }
}

情景二：离开路由时将信息保存在本地，进入页面created时，可判断赋值。

export default {
    methods: {},
    beforeRouteLeave (to, from, next) {
        // 导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        if (to.name === 'detail') { // 若要跳到详情页，则将分页和筛选信息存在Storage
          window.sessionStorage.setItem('pageInfo', JSON.stringify(this.pageInfo));
        } else { // 若不是详情页，则清楚分页信息
          window.sessionStorage.removeItem('pageInfo');
        }
        // 执行路由跳转
        next();
    },
    created() {
        const pageInfo = window.sessionStorage.getItem('pageInfo');
        this.pageInfo = pageInfo ? JSON.parse(pageInfo) : {
          pn: 1,
          pageSize: this.pageSizes[2],
          total: 0,
        };
    },
};