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) - [设备管理-菜单页](file://app/devicemate-app/modules/equipment/menu.vue) - [设备管理-基础信息页](file://app/devicemate-app/modules/equipment/basicInfo.vue) - [设备管理-管理信息页](file://app/devicemate-app/modules/equipment/manageInfo.vue) - [设备管理-主页](file://app/devicemate-app/modules/equipment/equipment.vue) - [权限指令](file://app/devicemate-app/directive/index.js) - [登录状态判断工具](file://app/devicemate-app/config/login.js) - [本地存储工具](file://app/devicemate-app/utils/localstorage.js) - [登录状态Vuex模块](file://app/devicemate-app/store/modules/login.js)目录
简介
本文件面向DeviceMate Vue.js Web应用（基于uni-app生态）的路由与导航体系，系统梳理页面清单、导航行为、权限控制、参数传递、标题管理与性能优化实践。文档以pages.json中的页面声明为基础，结合应用入口、设备模块页面与权限指令，给出可操作的配置建议与最佳实践。
项目结构
DeviceMate前端采用uni-app多端统一框架，页面清单集中于pages.json，应用入口在main.js与App.vue中完成全局初始化与鉴权跳转逻辑。设备模块通过pages.json声明并以“模块化页面”形式组织，形成清晰的页面导航与标题管理边界。
图表来源
章节来源
核心组件
- 页面清单与导航
- pages.json集中声明页面路径、样式与tabBar配置，统一管理导航栏标题、图标与页面分组。
- 应用入口与全局初始化
- main.js注册UI库、全局组件、HTTP与提示工具、本地存储工具，并挂载i18n与Vuex。
- 设备模块页面
- equipment.vue为主页，menu.vue为设备详情菜单容器，basicInfo.vue与manageInfo.vue分别承载基础信息与管理信息子页面。
- 权限控制
- 通过自定义权限指令对DOM节点进行显隐控制；结合登录状态判断与用户信息持久化实现前端侧权限过滤。
章节来源
架构总览
DeviceMate的导航与路由由以下要素协同：
- 页面清单驱动的导航：pages.json定义页面与tabBar，统一设置导航栏标题与样式。
- 页面间跳转：设备主页通过uni.navigateTo跳转至菜单页，菜单页再根据选项跳转到具体子页面。
- 标题管理：页面生命周期内调用uni.setNavigationBarTitle动态设置标题。
- 权限控制：自定义指令按用户权限过滤不可见元素；登录状态通过全局方法与Vuex模块配合。
图表来源
详细组件分析
页面清单与导航（pages.json）
- 页面声明
- pages数组定义应用启动页与各页面路径，style中可设置导航栏标题文本、样式与平台特定配置（如app-plus的titleNView按钮）。
- 示例：设备模块页面均以“modules/equipment/*”路径声明，便于统一管理。
- tabBar配置
- list字段定义底部tab项，包含pagePath、图标与文案，支持国际化占位符。
- 全局样式
- globalStyle统一导航栏文字颜色、背景色与页面背景色。
章节来源
应用入口与全局初始化（main.js、App.vue）
- main.js
- 注册uView UI、全局组件与mescroll相关组件。
- 挂载全局HTTP请求对象、提示工具与本地存储工具。
- 引入i18n与Vuex，作为后续导航与权限控制的基础。
- App.vue
- onLaunch与onShow中执行升级检测、鉴权跳转与用户信息加载。
- 通过HTTP获取当前用户信息与菜单树，持久化到本地存储，供权限指令与页面使用。
章节来源
设备模块导航与参数传递
- 主页到菜单页
- equipment.vue在点击设备卡片时，通过uni.navigateTo携带deviceNo、deviceMainRoleType等参数跳转至menu.vue。
- 菜单页到子页面
- menu.vue根据菜单项的url字段，拼接参数后跳转至对应子页面（如basicInfo、manageInfo等）。
- 子页面标题设置
- basicInfo.vue在onLoad中根据传入的设备编号动态设置导航栏标题，增强用户上下文感知。
图表来源
章节来源
权限控制与菜单动态生成
- 权限指令
- 自定义v-auth指令读取当前用户菜单树，递归匹配权限码，未匹配则隐藏或禁用元素，实现前端级权限过滤。
- 登录状态与用户信息
- App.vue在启动与显示阶段拉取用户信息与菜单树，写入本地存储；全局方法$judgeLogin用于判断登录状态。
- Vuex模块login提供登录URL等状态管理能力，便于跨页面共享。
- 动态菜单生成
- menu.vue根据国际化文案与菜单树生成菜单项，结合权限指令控制可见性，形成“菜单动态生成+前端权限过滤”的闭环。
图表来源
章节来源
页面标题管理与平台特性
- 标题设置
- 在页面onLoad或事件回调中调用uni.setNavigationBarTitle设置标题，确保用户明确当前所处设备与页面。
- 平台特性
- pages.json中app-plus的titleNView可为导航栏右侧添加按钮，结合国际化文案实现统一风格。
章节来源
路由拦截与页面拦截（概念说明）
- 页面拦截（RouterTab相关）
- 在复杂场景下，可通过页面拦截机制在路由切换前执行确认逻辑（例如离开确认），避免误操作导致数据丢失。该机制通常在路由守卫之外，通过组件级beforePageLeave钩子与RouterAlive缓存策略协作实现。
- 路由拦截（概念说明）
- 对于需要统一鉴权或权限校验的页面，可在路由层增加前置守卫，结合用户信息与菜单树进行放行或重定向。DeviceMate当前以页面级与指令级控制为主，若需扩展到路由层，可参考上述思路在路由层补充拦截逻辑。
（本节为概念性说明，不直接分析具体源码）
依赖关系分析
- 组件耦合
- 设备主页依赖mescroll组件与字典混入；菜单页依赖国际化与HTTP请求；管理信息页依赖多类字典与远程数据。
- 数据流
- App.vue负责加载用户信息与菜单树，供权限指令与页面使用；页面通过HTTP请求获取设备详情与参数列表。
- 外部依赖
- uView UI、mescroll-uni、国际化资源与本地存储工具贯穿全局。
图表来源
章节来源
性能考虑
- 页面懒加载（建议）
- 将非首屏使用的页面拆分为异步组件，减少初始包体积与首屏渲染压力。
- 资源优化
- 图片懒加载、字典数据缓存与本地存储复用，降低重复请求。
- 导航性能
- 使用mescroll的分页加载与上拉下拉回调，避免一次性加载大量数据。
- 标题与平台特性
- 在必要时才更新导航栏标题，减少不必要的页面重绘。
（本节为通用指导，不直接分析具体源码）
故障排查指南
- 页面标题未更新
- 检查页面onLoad或事件回调中是否正确调用uni.setNavigationBarTitle，确认传入的设备编号与国际化文案可用。
- 菜单项不可见
- 检查本地存储中的用户菜单树是否正确加载；确认v-auth指令绑定的权限码与菜单树一致。
- 登录状态异常
- 检查App.vue中用户信息与菜单树的拉取逻辑，确认HTTP请求头与令牌传递正确；核对$judgeLogin方法的实现与返回值。
- 参数传递错误
- 检查uni.navigateTo携带的参数键名与目标页面接收逻辑是否一致，避免因键名不匹配导致页面无法渲染。
章节来源
结论
DeviceMate的导航体系以pages.json为纲，结合设备模块页面与权限指令，实现了清晰的页面导航、动态菜单与前端权限过滤。通过在页面生命周期中设置标题与参数传递，配合本地存储与国际化资源，提升了用户体验与可维护性。建议在现有基础上进一步引入页面懒加载与路由层拦截，以获得更佳的性能与安全性。
附录
- 页面清单关键字段说明
- path：页面路径（相对根目录）
- style.navigationBarTitleText：导航栏标题文本
- style.app-plus.titleNView.buttons：平台特定导航栏右侧按钮
- tabBar.list：底部tab项集合
- 常用API
- uni.navigateTo：页面跳转
- uni.setNavigationBarTitle：设置导航栏标题
- uni.showToast：全局提示
- uni.scanCode：扫码（设备主页的导航栏右侧按钮触发）
章节来源