vue路由回退弹出提示框

583 阅读1分钟

1、拦截路由回退弹层功能出现的原因:

为了增加用户体验在移动端用户容易误操作回退按键或者左滑,导致页面回退,特别是大表单页面填写未提交时,如果出现了这种误操作会导致浪费用户大量精力和时间。

2、由产品提出要求,回退时是否可以增加弹窗拦截

思路就是在页面组件生命周期钩子 beforeRouteLeave 时进行拦截,确定后改变inter。

3、代码片段

beforeRouteLeave(to, from, next){

    if(this.interceptRouter){

      next((()=>{

        MessageBox.confirm('你可能有修改未提交,确定返回上级页面?').then(()=>{

          this.interceptRouter = false;

          this.$router.go(-1)

        }).catch(()=>{

        })

        return false;

      })())

    }else{

      next()

    }
    
  }

4、interceptRouter

来判断是否有提交的数据