正文
Vue 路由守卫解决页面退出和弹窗的显示冲突
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
在使用UI框架提供的弹出层Popup时，如Vant UI的popup，在弹出层显示时，点击物理按键或者小程序自带的返回时，会直接退出页面，这明显不符合页面逻辑。
解决思路：
在弹出层显示时，点击了返回要退出页面前，判断弹出层是否处于显示状态，若处于显示状态，便只关闭弹出层，而不退出页面
解决方法：
//页面离开前做的事情，而这个时候，路由已经发生变化，改变成了即将跳转的页面的路由
beforeRouteLeave(to, from, next){
if (this.popVisible){ //判断弹出层是否显示
//将路由前进一步，在路由历史中，前进一步则是当前页面
this.$router.go(1)
this.popVisible = false //关闭弹出层
//退出方法，已经将路由更改为当前页面，当弹出层关闭时，页面
仍处于弹出层显示前的状态
return
}
//当弹出层处于隐藏状态时，点击返回则直接跳转页面，不做任何操作
next()
},
