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
来判断是否有提交的数据