一、拦截路由回退弹层功能出现的原因：为了增加用户体验
在移动端用户容易误操作回退按键或者左滑，导致页面回退，
特别是大表单页面填写未提交时，
如果出现了这种误操作会导致浪费用户大量精力和时间。
二、由产品提出要求，回退时是否可以增加弹窗拦截
思路就是在页面组件生命周期钩子 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来判断是否有提交的数据
网友评论