Appearance
路由配置与定义
**本文引用的文件** - [pages.json](file://app/devicemate-app/pages.json) - [main.js](file://app/devicemate-app/main.js) - [App.vue](file://app/devicemate-app/App.vue) - [store/index.js](file://app/devicemate-app/store/index.js) - [store/modules/login.js](file://app/devicemate-app/store/modules/login.js) - [设备管理模块入口 equipment.vue](file://app/devicemate-app/modules/equipment/equipment.vue) - [布局组件 layout.vue](file://dm/lemes-web/src/views/devicemate/common/layout.vue)目录
简介
本文件面向 DeviceMate 移动端应用（基于 uni-app）的路由配置与定义，系统性梳理页面清单、布局组件、导航与权限集成，并结合现有代码对“常量路由”与“动态路由”的差异进行说明，给出路由命名规范、路径设计原则与最佳实践，帮助开发者在不直接阅读源码的情况下快速理解并正确扩展路由体系。
项目结构
DeviceMate 前端采用 uni-app 页面声明式配置，路由与页面清单主要集中在 pages.json 中；应用入口在 main.js；运行时通过 App.vue 完成初始化与鉴权跳转逻辑；状态管理通过 Vuex store 组织模块。
图表来源
章节来源
核心组件
- 页面清单与导航
- pages.json 中集中声明所有可访问页面与 tabBar 项，支持页面级样式与平台特定配置（如 app-plus 的标题栏按钮）。
- 应用入口与全局能力
- main.js 注册 UI、全局组件、HTTP 请求封装与本地存储工具，挂载 i18n 与 store。
- 鉴权与菜单拉取
- App.vue 在应用启动与显示阶段执行版本检查、登录态校验与菜单列表拉取，将用户信息与菜单持久化到本地存储。
- 状态管理
- store/index.js 初始化模块集合；login.js 提供登录相关状态与动作。
章节来源
架构总览
DeviceMate 的路由以“页面清单驱动”为主，配合应用生命周期完成鉴权与菜单拉取，最终形成“常量页面 + 动态菜单”的组合形态。下图展示从启动到页面渲染的关键交互：
图表来源
详细组件分析
页面清单与路由基础
- pages.json 是 uni-app 的路由与页面清单中心，包含：
- 页面数组 pages：声明所有可直接访问的页面路径与样式（含导航栏标题、平台特性等）。
- tabBar：声明底部导航项及其图标与文案。
- globalStyle：全局导航样式。
- 关键点
- 页面 path 以相对路径形式声明，例如 "pages/store/index"、"modules/equipment/equipment"。
- 支持 app-plus 平台的标题栏按钮配置，用于触发业务操作。
- 导航栏标题文本支持国际化占位符，便于多语言切换。
章节来源
常量路由与动态路由
- 常量路由（constantRoutes）
- 概念：在应用构建期即确定、无需权限即可访问的页面集合，通常包含登录页、首页、消息页等。
- 在当前代码中，pages.json 已声明了如 "pages/user/login"、"pages/store/index"、"pages/equipment/index"、"pages/message/index" 等页面，这些属于常量路由范畴。
- 动态路由（asyncRoutes）
- 概念：根据用户权限动态生成的菜单路由，通常来源于后端返回的菜单树，按需注入前端路由表。
- 在当前代码中，App.vue 在启动时会调用接口拉取菜单列表并持久化，但未见显式的“动态路由注入”代码片段。因此，动态路由的注入逻辑可能位于其他模块或尚未在该仓库体现。
- 使用建议
- 将登录、公共页等放入常量路由，减少鉴权判断开销。
- 权限菜单统一由后端下发，前端仅做拼装与注入，避免硬编码。
章节来源
路由组件与懒加载机制
- uni-app 的页面加载策略
- pages.json 中声明的页面为“页面级组件”，由框架按需加载，无需手动实现懒加载。
- 对于非页面级组件（如模块内的子视图），可通过动态 import 实现按需加载。
- 实践要点
- 页面级路由：在 pages.json 中声明 path 即可，无需额外配置。
- 组件级懒加载：在需要的地方使用动态 import，降低首屏体积。
- 注意：动态 import 的模块路径需遵循 uni-app 的模块解析规则。
章节来源
布局组件与嵌套路由
- 布局组件
- 在当前仓库中，存在一个 Web 端布局组件 layout.vue，展示了典型的侧边栏、头部、标签页与主内容区的组合，体现了“容器-内容”分层思想。
- 该布局组件在 Web 端作为容器使用，移动端页面通过 pages.json 声明式配置实现类似效果。
- 嵌套路由设计
- 嵌套路由通常指父路由下包含多个子路由视图，Web 端常见于菜单树与标签页联动。
- 当前移动端以页面清单驱动，未见深层嵌套的路由配置；若需在移动端模拟嵌套路由，可在单一页面内通过子组件切换实现。
章节来源
路由元信息 meta 配置
- pages.json 中的页面样式 style 可视为“元信息”的一部分，包含：
- 导航栏标题：navigationBarTitleText
- 导航样式：navigationStyle（如 custom）
- 平台特性：app-plus 下的 titleNView 按钮配置
- 说明
- 该配置等价于“页面级 meta”，用于控制页面外观与行为，而非路由守卫或权限字段。
- 若需实现权限控制与面包屑等，可在业务层结合菜单数据与页面样式共同实现。
章节来源
路由命名规范与路径设计原则
- 命名规范
- 页面路径使用小写与短横线风格，如 "pages/store/index"、"modules/equipment/equipment"。
- 模块化目录清晰，功能域明确（equipment、maintain、inspectTasks、patrolTasks、repair、common、stringing）。
- 路径设计原则
- 一级页面置于 pages 目录，二级及以下页面置于对应模块目录。
- 与 tabBar 对应的页面使用统一命名，便于维护。
- 平台特定配置（如 app-plus）集中于对应页面 style 内，避免分散。
章节来源
最佳实践
- 路由模块化组织
- 将同功能页面归档到 modules 子目录，保持结构清晰。
- 动态路由添加
- 建议在应用初始化完成后，依据后端菜单数据生成路由表并注入（当前仓库未见该实现，建议新增模块负责）。
- 路由重置
- 登出或切换账号时，清除本地存储的用户信息与菜单，重置 store 状态，刷新页面。
章节来源
依赖关系分析
- 页面依赖
- pages.json 声明的页面被框架直接识别与渲染。
- 生命周期依赖
- App.vue 在启动与显示阶段依赖网络请求与本地存储，依赖 store 获取登录状态。
- 全局能力依赖
- main.js 注入 UI、全局组件与工具函数，为页面提供统一能力。
图表来源
章节来源
性能考量
- 页面按需加载
- 通过 pages.json 声明页面，框架自动按需加载，减少首屏负担。
- 组件懒加载
- 对非页面级组件使用动态 import，避免一次性加载全部资源。
- 本地存储与缓存
- 登录态与菜单信息持久化，减少重复请求。
- 平台特性优化
- app-plus 的标题栏按钮等配置按需启用，避免不必要的渲染。
故障排查指南
- 页面无法访问
- 检查 pages.json 中是否正确声明 path 与 style。
- 导航栏标题不显示
- 确认 navigationBarTitleText 是否设置，以及国际化占位符是否正确解析。
- 登录后跳转异常
- 查看 App.vue 中鉴权跳转逻辑与菜单拉取流程，确认本地存储中用户信息与菜单是否存在。
- 动态路由未生效
- 若存在动态路由注入逻辑，请确认注入时机与菜单数据结构是否匹配。
章节来源
结论
DeviceMate 的路由体系以 pages.json 为核心，结合 App.vue 的生命周期与 store 的状态管理，实现了“常量页面 + 动态菜单”的组合模式。当前仓库未发现显式的动态路由注入实现，建议在应用初始化完成后，依据后端菜单数据生成路由表并注入。通过模块化组织与规范化的命名与路径设计，可有效提升路由系统的可维护性与扩展性。
附录
- 示例页面路径
- 设备管理模块入口：设备管理模块入口 equipment.vue
- Web 端布局组件：布局组件 layout.vue:1-193