> For the complete documentation index, see [llms.txt](https://docs.chamilo.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.chamilo.org/2.x/zh/kai-fa-zhe-zhi-nan/developer-guide/frontend/views-and-routing.md).

# 视图与路由

Chamilo 拥有一套庞大的 Vue 视图（页面级组件），通过 Vue Router 进行连接。实际文件位于 `assets/vue/views/` 目录下。

## 路由架构

路由定义在 `assets/vue/router/index.js` 中，使用 `createWebHistory` 来实现简洁的 URL。

路由是模块化的——按功能组织成独立的路由文件，并导入到主路由中：

| 路由模块                | 页面             |
| ------------------- | -------------- |
| `admin`             | 管理面板页面         |
| `sessionAdmin`      | 会话管理页面         |
| `course`            | 课程列表、创建、主页、目录  |
| `account`           | 用户资料和设置        |
| `personalfile`      | 个人文件空间         |
| `message`           | 消息/收件箱         |
| `user`              | 用户管理页面         |
| `usergroup`         | 用户组（班级）页面      |
| `userreluser`       | 用户关系（好友/关注）页面  |
| `ccalendarevent`    | 课程日历和议程        |
| `ctoolintro`        | 课程工具介绍页面       |
| `page`              | 静态 CMS 页面      |
| `pageLayout`        | 页面布局包装器        |
| `publicPage`        | 公开访问页面         |
| `social`            | 社交网络页面         |
| `filemanager`       | 文件管理器（课程文档浏览器） |
| `skill`             | 技能和能力页面        |
| `accessurl`         | 多 URL（门户）管理页面  |
| `branch`            | 分支/网络校区页面      |
| `room`              | 虚拟房间页面         |
| `buycourses`        | 课程购买页面         |
| `documents`         | 文档管理           |
| `assignments`       | 作业流程           |
| `links`             | 外部链接管理         |
| `glossary`          | 词汇表管理          |
| `attendance`        | 出勤跟踪           |
| `lp`                | 学习路径播放器和编辑器    |
| `dropbox`           | Dropbox / 文件交换 |
| `blog`              | 博客页面           |
| `blogAdmin`         | 博客管理           |
| `coursemaintenance` | 课程备份和恢复        |
| `catalogue`         | 课程和会话目录        |

## 关键路由

| 路径                   | 视图                                         | 描述       |
| -------------------- | ------------------------------------------ | -------- |
| `/`                  | `AppIndex.vue`（或自定义）                       | 应用入口点    |
| `/home`              | `pages/Home.vue`                           | 平台主页     |
| `/login`             | `pages/Login.vue`                          | 登录页面     |
| `/courses`           | `views/user/courses/List.vue`              | 用户已注册的课程 |
| `/sessions`          | `views/user/sessions/SessionsCurrent.vue`  | 当前会话     |
| `/sessions/past`     | `views/user/sessions/SessionsPast.vue`     | 过去的会话    |
| `/sessions/upcoming` | `views/user/sessions/SessionsUpcoming.vue` | 即将到来的会话  |
| `/course/:id/home`   | `views/course/CourseHome.vue`              | 课程主页     |
| `/account/home`      | `views/account/Home.vue`                   | 用户资料     |
| `/admin`             | 管理视图                                       | 管理面板     |
| `/faq`               | `pages/Faq.vue`                            | 常见问题页面   |

## 路由守卫

路由使用导航守卫（通过 `beforeEach` 和 `afterEach` 声明）来：

* 通过 `useSecurityStore` 检查认证状态，并将未认证用户重定向到 `/login`
* 通过 `useCidReqStore` 验证课程上下文
* 在 SPA 导航期间应用页面类型 CSS 类（替代 Twig 的 `PageHelper` 在完整页面加载时所做的工作）
* 支持自定义 Vue 模板覆盖——当启用自定义 Vue 模板时，入口组件 `/` 将被替换为自定义的 `AppIndex.vue`（`var/vue_templates/pages/AppIndex.vue`）

## 视图组织

视图位于 `assets/vue/views/` 中，按功能组织：

```
views/
├── account/          # 用户资料和设置
├── admin/            # 管理页面
├── assignments/      # 作业提交和评分
├── attendance/       # 出勤表
├── blog/             # 博客文章和评论
├── branch/           # 网络校区管理
├── buycourses/       # 课程购买流程
├── ccalendarevent/   # 课程日历
├── course/           # 课程列表、主页、创建、目录
├── coursecategory/   # 课程类别管理
├── coursemaintenance/# 课程备份/恢复
├── ctoolintro/       # 工具介绍页面
├── documents/        # 文档列表、创建、媒体生成
├── dropbox/          # Dropbox / 文件交换
├── filemanager/      # 文件浏览器
├── glossary/         # 词汇表列表和术语管理
├── links/            # 外部链接
├── lp/               # 学习路径播放器和编辑器
├── message/          # 收件箱和消息
├── page/             # CMS 静态页面
├── pageLayout/       # 页面布局包装器
├── personalfile/     # 个人文件空间
├── room/             # 虚拟房间
├── sessionadmin/     # 会话管理
├── skill/            # 技能和能力
├── social/           # 社交网络
├── terms/            # 服务条款
├── user/             # 用户管理和课程/会话列表
├── usergroup/        # 用户组（班级）
└── userreluser/      # 用户关系（好友/关注）
```