zoukankan      html  css  js  c++  java
  • vue 路由页面 首次打开浏览器 返回上一页异常问题

    我这里把dialog放到一个页面中 通过路由跳转到该页面展示dialog 该dialog为页面的子路由

    直接就默认把dialog 的visible 的变量定义为true 路由到这个页面就展示dialog

    在dialog before-close 函数 使用this.$router.back() 返回前一个路由

    出现问题,dialog页面首次打开时,页面返回前一个路由,但是dialog却一直显示关闭掉  除非刷新后才能正常   但是关掉浏览器,再次登录还是遇到这样的问题

    原来一直以为是路由的页面 使用dialog的问题,后来才发现是任何路由返回都有问题,正常点击跳转路由是没有问题的

    一刷新页面就好使了的原因是,我已经登录了全局前置守卫就没有走我router 的push 跳转到登录页面吗,

    而是直接调用next()跳转到了页面,所以返回功能就正常了

    前置守卫必须调用一次 next 来 resolve 这个钩子  这个钩子后续应该还有什么操作 我们需要resolve后才能执行后续的操作

    next("/login") , next({path:"/login"}) 这两个方法都是跳转到登录页面

    具体可以参看vue-router的官方文档

    https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB

    解决方法:

    主要原因全局前置守卫 beforeEach 问题 拦截未登录跳转登录问题  修改为使用next跳转
    to 要跳转到的页面
    from 要跳转离开的页面

    router.beforeEach((to, from, next) => {
      //console.log('登录状态', store.getters.isLogin);
      if (to.meta.requestAuth === true && store.getters.isLogin === false) {
          //跳转页面使用next跳转 不要使用router的push跳转
          next("/login");
      }else {
        document.title = to.meta.title ?? document.title;
        next();//跳转到页面
      }
    
    });

    发现首次进入可以返回就好使了

  • 相关阅读:
    微信小程序 checkbox 组件
    微信小程序 button 组件
    h5视频标签 video
    h5离线缓存
    ECharts插件介绍(图表库)
    rich-text 副文本组件 text文本组件
    progress组件(进度条)
    icon组件
    movable-view组件
    android 双击图片变大,缩放功能
  • 原文地址:https://www.cnblogs.com/rchao/p/14870527.html
Copyright © 2011-2022 走看看