# 視圖與路由

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`             | Admin views                                | 管理面板     |
| `/faq`               | `pages/Faq.vue`                            | 常見問題頁面   |

## 路由守衛

路由使用導航守衛（以 `beforeEach` 和 `afterEach` 宣告）來：

* 透過 `useSecurityStore` 檢查認證狀態，並將未認證使用者重新導向至 `/login`
* 透過 `useCidReqStore` 驗證課程脈絡
* 在 SPA 導航期間套用頁面類型 CSS 類別（取代 Twig 的 `PageHelper` 在完整頁面載入時所做的工作）
* 支援自訂 Vue 範本覆寫 — 當啟用自訂 Vue 範本（`var/vue_templates/pages/AppIndex.vue`）時，入口元件 `/` 會替換為自訂的 `AppIndex.vue`

## 視圖組織

視圖位於 `assets/vue/views/`，依功能組織：

```
views/
├── account/          # User profile and settings
├── admin/            # Admin pages
├── assignments/      # Assignment submission and grading
├── attendance/       # Attendance sheets
├── blog/             # Blog posts and comments
├── branch/           # Network campus management
├── buycourses/       # Course purchase flow
├── ccalendarevent/   # Course calendar
├── course/           # Course list, home, creation, catalog
├── coursecategory/   # Course category management
├── coursemaintenance/# Course backup/restore
├── ctoolintro/       # Tool introduction pages
├── documents/        # Document list, creation, media generation
├── dropbox/          # Dropbox / file exchange
├── filemanager/      # File browser
├── glossary/         # Glossary list and term management
├── links/            # External links
├── lp/               # Learning path player and editor
├── message/          # Inbox and messaging
├── page/             # CMS static pages
├── pageLayout/       # Page layout wrappers
├── personalfile/     # Personal file space
├── room/             # Virtual rooms
├── sessionadmin/     # Session administration
├── skill/            # Skills and competencies
├── social/           # Social network
├── terms/            # Terms of service
├── user/             # User management and course/session lists
├── usergroup/        # User groups (classes)
└── userreluser/      # User relationships (friends/follows)
```


---

# 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-tw/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.