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"}) 这两个方法都是跳转到登录页面

注意：next 执行的时候并没有跳转页面，而是后续处理才跳转页面 所以这里直接调用路由方法跳转的话会出现问题

比如next(false) 则表示不跳转页面，但是我们发现当前路由的信息有一点不正常，当前路由虽然没有跳转，但是持有的title信息改变了,变成了要跳转到的路由页面持有的title

 

具体可以参看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();//跳转到页面
  }

});

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