vue拦截路由回退弹出弹框
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue拦截路由回退弹出弹框相关的知识，希望对你有一定的参考价值。
参考技术A 一、拦截路由回退弹层功能出现的原因：为了增加用户体验在移动端用户容易误操作回退按键或者左滑，导致页面回退，
特别是大表单页面填写未提交时，
如果出现了这种误操作会导致浪费用户大量精力和时间。
二、由产品提出要求，回退时是否可以增加弹窗拦截
思路就是在页面组件生命周期钩子 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来判断是否有提交的数据
以上是关于vue拦截路由回退弹出弹框的主要内容，如果未能解决你的问题，请参考以下文章