> 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-tw/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`             | 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)
```