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

3,193 阅读2分钟

一、背景

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

场景二:当从有分页器和筛选条件的列表页,好不容易筛选出了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,
        };
    },
};