zoukankan      html  css  js  c++  java
  • Vue 路由守卫解决页面退出和弹窗的显示冲突

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

    解决思路:

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

    解决方法:

    //页面离开前做的事情,而这个时候,路由已经发生变化,改变成了即将跳转的页面的路由
    beforeRouteLeave(to, from, next){
        if (this.popVisible){ //判断弹出层是否显示
                    //将路由前进一步,在路由历史中,前进一步则是当前页面
            this.$router.go(1)
            this.popVisible = false //关闭弹出层
                    //退出方法,已经将路由更改为当前页面,当弹出层关闭时,页面 
                     仍处于弹出层显示前的状态
            return 
        }
            //当弹出层处于隐藏状态时,点击返回则直接跳转页面,不做任何操作
        next()
    },
  • 相关阅读:
    array常用方法总结
    .babelrc参数小解
    async/await方法解析
    html5-entities.js消失问题
    h => h(App)解析
    package.json字段简要解析
    body-parser小解
    mongodb中的__v字段
    module.exports与exports
    freemarker判断对象是否为空
  • 原文地址:https://www.cnblogs.com/zhichong/p/11137490.html
Copyright © 2011-2022 走看看