Appearance
路由模块化管理
**本文引用的文件** - [handler.js](file://dm/lemes-web/src/router/handler.js) - [index.js](file://dm/lemes-web/src/router/index.js) - [example.js](file://dm/lemes-web/src/router/modules/example.js) - [routes.js](file://dm/lemes-web/src/components/routerTab/util/routes.js) - [index.js](file://dm/lemes-web/src/components/routerTab/index.js) - [AGENTS.md](file://app/devicemate-app/AGENTS.md) - [equipment.vue](file://dm/lemes-web/src/views/devicemate/equipment/equipment.vue) - [environment.vue](file://dm/lemes-web/src/views/devicemate/environment/environment/environment.vue)目录
简介
本文件面向DeviceMate前端路由模块化系统，提供从架构到实现细节的完整管理文档。重点覆盖：
- 路由模块的组织结构与命名规范（按业务域划分）
- 路由处理器handler.js的职责与实现（路由注册、权限处理、动态路由生成）
- 模块间依赖关系与导入导出机制
- 模块化路由的加载顺序与性能优化策略
- 开发规范、代码组织与测试策略
- 扩展方法、版本管理与维护最佳实践
项目结构
DeviceMate前端采用“视图按业务域分层 + 路由模块化”的组织方式：
- 路由核心：router/index.js 定义常量路由与异步路由，统一创建与重置路由实例
- 路由处理器：router/handler.js 在全局守卫中完成鉴权、初始化、动态菜单与模块初始化
- 路由模块：router/modules 下按功能域拆分模块（如示例模块），便于扩展与维护
- 路由标签页：components/routerTab 提供注入式路由与缓存能力
- 视图层：views/devicemate 下按业务域划分页面（设备、环境、维修、保养等）
图表来源
章节来源
核心组件
- 路由创建与重置
- 创建常量路由与异步路由集合，统一导出路由实例；提供 resetRouter 用于运行时重置匹配器
- 全局路由守卫
- beforeEach：处理白名单、刷新令牌、项目初始化、语言切换、菜单与模块初始化、WebSocket用户绑定、登录跳转逻辑
- afterEach：结束进度条
- 路由模块
- 以模块化形式组织业务域路由，支持嵌套路由与空组件占位
- 注入式路由标签页
- 提供 iframe 等注入式路由与缓存能力
章节来源
架构总览
路由模块化系统围绕“常量路由 + 异步路由 + 全局守卫 + 模块化业务域”的模式构建，确保：
- 路由注册集中化（router/index.js）
- 权限与初始化在进入前完成（router/handler.js）
- 业务域路由按需扩展（router/modules/*.js）
- 视图层与路由解耦（views/devicemate/*）
图表来源
详细组件分析
路由处理器 handler.js
职责与流程要点：
- 白名单与刷新令牌处理：对特定路径与带刷新参数的路径进行特殊处理
- 初始化与语言切换：根据环境选择初始化信息并切换语言
- 权限与登录校验：读取用户与令牌，必要时触发登录跳转
- 动态菜单与模块初始化：首次进入时初始化菜单与模块，建立WebSocket用户标识
- 进度条与替换跳转：在导航过程中展示进度条，必要时替换当前路由
图表来源
章节来源
路由注册与模块化加载
- 常量路由与异步路由分离：将固定路由与权限相关路由分别定义，便于权限控制与懒加载
- 模块化导入：通过 importPage 与动态 import 实现按需加载，配合 webpackChunkName 优化打包
- 注入式路由标签页：通过 RouterTabRoutes 注入标签页路由，支持缓存与复用
图表来源
章节来源
业务域路由与命名规范
- 按业务域划分：views/devicemate 下按领域拆分（设备、环境、维修、保养、报修等）
- 路由命名与路径：遵循小写中划线命名，路径与页面一一对应，便于维护与检索
- 权限与菜单：通过 meta 字段标注标题、图标、角色等，配合权限系统使用
章节来源
依赖分析
- 路由层依赖
- router/index.js 依赖 components/routerTab 注入标签页路由
- router/handler.js 依赖 store、NProgress、工具库与 WebSocket 通信
- 视图层依赖
- 各业务域页面依赖统一组件库、工具函数与 API 模块
- 模块间关系
- 模块化路由通过 importPage 与动态 import 解耦视图加载
- 注入式路由通过 RouterTabRoutes 与 components/routerTab 协作
图表来源
章节来源
性能考虑
- 懒加载与代码分割
- 使用动态 import 与 webpackChunkName，按模块拆分包，减少首屏体积
- 进度条与导航体验
- beforeEach 启动进度条，afterEach 结束，提升感知性能
- 首次初始化优化
- 将初始化任务集中在守卫中一次性完成，避免重复请求
- 缓存与复用
- 注入式路由支持缓存，减少重复渲染开销
章节来源
故障排查指南
- 登录跳转循环
- 检查白名单配置与登录页跳转逻辑，确认无环路重定向
- 令牌刷新后页面空白
- 确认刷新令牌参数解析与 store 写入流程，检查 next 替换逻辑
- 首次进入无菜单
- 核对初始化菜单与模块的调用顺序，确保权限与用户信息已就绪
- 进度条不结束
- 检查 afterEach 是否被调用，是否存在未捕获异常导致守卫中断
章节来源
结论
DeviceMate路由模块化系统通过“常量+异步路由 + 全局守卫 + 模块化业务域”的设计，在保证权限与初始化一致性的同时，实现了良好的扩展性与性能表现。建议在后续迭代中持续完善模块化边界、统一命名规范与测试策略，以支撑更大规模的业务演进。
附录
开发规范与最佳实践
- 路由命名与路径
- 使用小写中划线命名，路径与页面一一对应
- 路由模块组织
- 按业务域拆分模块，子路由使用嵌套结构，必要时使用空组件占位
- 权限与元信息
- 通过 meta 字段标注标题、图标、角色等，配合权限系统使用
- 视图与路由解耦
- 页面仅依赖通用组件与工具函数，避免直接耦合路由配置
章节来源
测试策略建议
- 单元测试
- 对路由守卫的关键分支（白名单、登录、初始化）编写断言
- 集成测试
- 模拟登录态与非登录态，验证路由跳转与页面渲染
- 性能测试
- 监控首屏加载时间与路由切换耗时，评估懒加载效果
[本节为通用指导，无需列出具体文件来源]