[问题记录] vue-router中导航守卫默认跳转login失败

问题

做博客后台的时候发现一个问题,在没启动服务的情况下,后台在 router 中并未读取到配置的情况下,应该默认跳转 login 页面。但是页面始终不跳转,并且伴随多个执行错误弹窗。

javascript 复制代码
router.beforeEach(async (to, from, next) => {
    Nprogress.start();
    // 获取系统设置数据
    try {
        const systemData = await getSystem();
    } catch (e) {
        next({name: 'login'})
    }
})

问题解决

javascript 复制代码
router.beforeEach(async (to, from, next) => {
    Nprogress.start();
    // 获取系统设置数据
    try {
        const systemData = await getSystem();
    } catch (e) {
        if (to.name !== 'login') {
            next({name: 'login'})
        }else {
            next();
        }
    }
})

问题分析

其实出现不断报错的情况,虽然在一定次数以后就终止了,但是仍然可以判断为是出现了死循环。(PS:一定次数后终止了应该是Vue框架的优化)

查阅 官方文档 发现其实早已写明:

第三个参数 next ,可以出现多于一次,但是逻辑路径不能重叠。

我在这个地方的死循环就是因为next虽然指定了跳转login但是仍然出现了逻辑路径重叠。

相关推荐
alexander0681 小时前
CSS 类选择器组合
前端·css
寅时码6 小时前
React 之死·终章:一个 useRef,把闭包陷阱、依赖数组、漫天 rerender 全送走
前端·react.js·ai编程
不好听6136 小时前
HTML 事件监听机制:从 DOM Level 0 到 React 合成事件
前端·react.js·html
wordbaby6 小时前
为什么刷新页面就 404?聊聊 SPA 路由与 Nginx 的那点事
前端
daols887 小时前
vxe-table 渲染器教程一:实现金额输入控件
javascript·vue.js·vxe-table
不好听6137 小时前
React 核心概念:JSX、组件与数据驱动
前端·react.js
触底反弹7 小时前
🔥 React 零基础入门(中):500 行屎山代码到组件化的蜕变
前端·javascript·react.js
不好听6137 小时前
React vs Vue:两大前端框架技术选型深度对比
前端·vue.js·react.js
GuWenyue7 小时前
Cursor黑盒拆解!1套LangChain.js手写Mini编程Agent,自动生成React项目,效率提升60%
前端·数据库·人工智能
GuWenyue7 小时前
传统Agent工具两大痛点!300行代码落地MCP跨语言工具,彻底解耦LLM与工具
前端·人工智能·算法