Vue 路由守卫解决页面退出和弹窗的显示冲突


在使用UI框架提供的弹出层Popup时,如Vant UI的popup,在弹出层显示时,点击物理按键或者小程序自带的返回时,会直接退出页面,这明显不符合页面逻辑。

解决思路:

在弹出层显示时,点击了返回要退出页面前,判断弹出层是否处于显示状态,若处于显示状态,便只关闭弹出层,而不退出页面

解决方法:

//页面离开前做的事情,而这个时候,路由已经发生变化,改变成了即将跳转的页面的路由
beforeRouteLeave(to, from, next){
    if (this.popVisible){ //判断弹出层是否显示
                //将路由前进一步,在路由历史中,前进一步则是当前页面
        this.$router.go(1)
        this.popVisible = false //关闭弹出层
                //退出方法,已经将路由更改为当前页面,当弹出层关闭时,页面 
                 仍处于弹出层显示前的状态
        return 
    }
        //当弹出层处于隐藏状态时,点击返回则直接跳转页面,不做任何操作
    next()
},

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM