Web_Template_Vue3_Dev/AI-Coding/04-Router-and-Views.md

04. 路由与页面组织（Router & Views）

• 路由文件：src/router/index.ts
• 核心结构：
  • constantRoutes：登录/注册/404 等公共路由
  • asyncRoutes：业务路由，通常以 Layout 为根节点容器

Views 目录约定（src/views）

本仓库页面主要集中在：

• src/views/index/：工作台/仪表盘等示例首页
• src/views/vab/：组件/表单/表格等示例页（演示用途居多）
• src/views/other/：杂项示例页（iframe/excel/drag/nested 等）
• src/views/setting/：后台管理相关页面（用户/角色/部门/菜单/字典/任务/日志等）
• src/views/tools/：工具类页面（如 EyeDropper/SpeechSynthesis）
• src/views/login/、src/views/register/、src/views/callback/：登录链路
• src/views/403.vue、src/views/404.vue：错误页

路由对页面的引用方式以动态导入为主：component: () => import('@/views/...')。

meta 约定（给菜单/面包屑/行为用）

常见 meta 字段（与组件实现强相关）：

• meta.title：菜单/面包屑/页面标题（VabLanguage 会用它更新 document.title）
• meta.icon + meta.isCustomSvg：菜单与面包屑图标（VabMenu/VabBreadcrumb）
• meta.hidden：是否从菜单隐藏（VabMenu）
• meta.breadcrumbHidden：是否从面包屑隐藏（VabBreadcrumb）
• meta.noColumn：Column 布局下的特殊处理（VabColumnBar 会折叠菜单并隐藏 fold 按钮）
• meta.target（如 _blank）：点击菜单时打开方式（VabMenuItem）
• meta.badge / meta.dot：菜单右侧标记（VabMenuItem）

AI 生成新模块页面的最小流程

• 在 src/views/<module>/ 创建页面组件
• 在 src/router/index.ts（或其拆分文件）添加路由记录
• 如涉及权限/菜单：同步 meta（title/icon/guard/...）

建议：新增页面后运行一次 AI-Coding/Validation.md 里的“router ↔ views 对账”脚本，防止路由引用了不存在的 .vue，或新页面忘记挂到路由上。

验收点

• 访问路由能渲染页面
• 菜单与面包屑符合 meta 约定
• 刷新后路由仍可恢复