产品需求,离开当前页面需要进行拦截,弹窗确认以后才离开。
笔者采用了在beforeRouteLeave里面进行拦截的方案。但是发现点击浏览器的后退按钮,会出现弹窗闪现一下,立刻消失,页面路由改变了,页面确没有变化。
解决方案
增加一个setTimeout延时
if (from.name === 'index') {
setTimeout(() => {
this.$confirm('您的信息尚未保存,是否确认操作', {
closeOnClickModal: false,
lockScroll: false
})
.then(async() => {
next()
})
.catch((e) => {
console.log(e)
next(false)
})
}, 200)
} else {
next()
}