# 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](AI-Coding/Validation.md) 里的“router ↔ views 对账”脚本，防止路由引用了不存在的 .vue，或新页面忘记挂到路由上。

## 验收点

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