# 视图与路由

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/      # 用户关系（好友/关注）
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.chamilo.org/2.x-zh-cn/kai-fa-zhe-zhi-nan/developer-guide/frontend/views-and-routing.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.