router.beforeEach((to, from, next) => { let t = to.meta.title; document.title = t ? t : "HRO"; next(); if (to.path === "/") { if (localStorage.getItem("sessionId")) { next(); console.log(localStorage.getItem("sessionId"), "132"); } else { next("/"); console.log(localStorage.getItem("sessionId"), "131"); } } });这样写刷新还是会返回登录页
时间: 2024-04-12 20:27:54 浏览: 65
vue router导航守卫(router.beforeEach())的使用详解
5星 · 资源好评率100%
这段代码是一个 Vue Router 的全局前置守卫,用于在路由切换前进行一些操作。根据代码逻辑,在刷新页面时,会执行到 `router.beforeEach` 中的逻辑。如果 `to.path` 是根路径 `/`,则会进入判断是否存在 `sessionId` 的逻辑。
根据你提供的代码,刷新页面时会执行 `next()`,然后立即执行 `if (to.path === "/")` 的判断逻辑。由于 `next()` 是异步的,所以在判断逻辑执行时 `localStorage.getItem("sessionId")` 得到的值可能还没有被更新。
为了解决这个问题,你可以将 `if (to.path === "/")` 的判断逻辑放在 `next()` 的回调函数中,确保在判断前 `localStorage.getItem("sessionId")` 的值已经被更新。修改后的代码如下:
```javascript
router.beforeEach((to, from, next) => {
let t = to.meta.title;
document.title = t ? t : "HRO";
next(() => {
if (to.path === "/") {
if (localStorage.getItem("sessionId")) {
console.log(localStorage.getItem("sessionId"), "132");
} else {
console.log(localStorage.getItem("sessionId"), "131");
next("/");
}
}
});
});
```
这样修改后,在刷新页面时,会先执行 `next()`,等待其完成后再执行判断逻辑,确保能正确判断是否跳转到登录页。
阅读全文