vue拦截路由回退弹窗

一，拦截路由回退弹层功能出现的原因：为了增加用户体验

在移动端用户容易误操作回退按键或者左滑，导致页面回退，

特别是大表单页面填写未提交时，

如果出现了这种误操作会导致浪费用户大量精力和时间。

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

我在网上找了一下，文案极少。

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

三，结合Vue.mixin增加代码通用性

在main.js中加入如下代码

// 设置路由拦截器
Vue.mixin({
  beforeRouteLeave(to, from, next) {
    if(this.interceptRouter){
      next((()=>{
        MessageBox.confirm('你可能有修改未提交，确定返回上级页面？').then(()=>{
          this.interceptRouter = false;
          this.$router.go(-1)
        }).catch(()=>{
          
        })
        return false;
      })())
    }else{
      next()
    }
  }
})

然后在需要回退拦截的页面data中加入interceptRouter在合适的时机（比如表单发生改变时）将值改为true

之后用户如果回退，就会弹出提示，点确定后会将interceptRouter 改为false，并再次执行go(-1)