我这里把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();//跳转到页面 } });
发现首次进入可以返回就好使了