vue拦截路由回退弹出弹框

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

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

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

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

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

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

三、beforeRouteLeave(to, from, next) {

    if(this.interceptRouter){

      next((()=>{

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

          this.interceptRouter = false;

          this.$router.go(-1)

        }).catch(()=>{

        })

        return false;

      })())

    }else{

      next()

    }

  }

四、interceptRouter来判断是否有提交的数据

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容