> 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/fr/guide-du-developpeur/developer-guide/frontend/views-and-routing.md).

# Vues et routage

Chamilo dispose d'un large ensemble de vues Vue (composants au niveau de la page) connectées via Vue Router. Les fichiers réels se trouvent sous `assets/vue/views/`.

## Architecture du Routeur

Le routeur est défini dans `assets/vue/router/index.js` en utilisant `createWebHistory` pour des URL propres.

Les routes sont modulaires — organisées en fichiers de routes par fonctionnalité, importés dans le routeur principal :

| Module de route     | Pages                                                       |
| ------------------- | ----------------------------------------------------------- |
| `admin`             | Pages du panneau d'administration                           |
| `sessionAdmin`      | Pages d'administration des sessions                         |
| `course`            | Liste des cours, création, page d'accueil, catalogue        |
| `account`           | Profil utilisateur et paramètres                            |
| `personalfile`      | Espace de fichiers personnels                               |
| `message`           | Messagerie / boîte de réception                             |
| `user`              | Pages de gestion des utilisateurs                           |
| `usergroup`         | Pages des groupes d'utilisateurs (classes)                  |
| `userreluser`       | Pages des relations entre utilisateurs (amis/suivis)        |
| `ccalendarevent`    | Calendrier et agenda des cours                              |
| `ctoolintro`        | Pages d'introduction aux outils de cours                    |
| `page`              | Pages statiques CMS                                         |
| `pageLayout`        | Enveloppes de mise en page                                  |
| `publicPage`        | Pages accessibles publiquement                              |
| `social`            | Pages de réseau social                                      |
| `filemanager`       | Gestionnaire de fichiers (navigateur de documents de cours) |
| `skill`             | Pages des compétences et aptitudes                          |
| `accessurl`         | Pages de gestion multi-URL (portail)                        |
| `branch`            | Pages des campus de réseau / branches                       |
| `room`              | Pages des salles virtuelles                                 |
| `buycourses`        | Pages d'achat de cours                                      |
| `documents`         | Gestion des documents                                       |
| `assignments`       | Flux de travail des travaux                                 |
| `links`             | Gestion des liens externes                                  |
| `glossary`          | Gestion du glossaire                                        |
| `attendance`        | Suivi de la présence                                        |
| `lp`                | Lecteur et éditeur de parcours d'apprentissage              |
| `dropbox`           | Dropbox / échange de fichiers                               |
| `blog`              | Pages de blog                                               |
| `blogAdmin`         | Administration du blog                                      |
| `coursemaintenance` | Sauvegarde et restauration des cours                        |
| `catalogue`         | Catalogues de cours et de sessions                          |

## Routes Clés

| Chemin               | Vue                                        | Description                              |
| -------------------- | ------------------------------------------ | ---------------------------------------- |
| `/`                  | `AppIndex.vue` (ou personnalisé)           | Point d'entrée de l'application          |
| `/home`              | `pages/Home.vue`                           | Page d'accueil de la plateforme          |
| `/login`             | `pages/Login.vue`                          | Page de connexion                        |
| `/courses`           | `views/user/courses/List.vue`              | Cours auxquels l'utilisateur est inscrit |
| `/sessions`          | `views/user/sessions/SessionsCurrent.vue`  | Sessions actuelles                       |
| `/sessions/past`     | `views/user/sessions/SessionsPast.vue`     | Sessions passées                         |
| `/sessions/upcoming` | `views/user/sessions/SessionsUpcoming.vue` | Sessions à venir                         |
| `/course/:id/home`   | `views/course/CourseHome.vue`              | Page d'accueil du cours                  |
| `/account/home`      | `views/account/Home.vue`                   | Profil utilisateur                       |
| `/admin`             | Vues d'administration                      | Panneau d'administration                 |
| `/faq`               | `pages/Faq.vue`                            | Page FAQ                                 |

## Gardes de Route

Le routeur utilise des gardes de navigation (déclarés avec `beforeEach` et `afterEach`) pour :

* Vérifier l'état d'authentification via `useSecurityStore` et rediriger les utilisateurs non authentifiés vers `/login`
* Vérifier le contexte du cours via `useCidReqStore`
* Appliquer des classes CSS de type de page lors de la navigation SPA (remplaçant ce que `PageHelper` de Twig ferait lors d'un chargement complet de page)
* Supporter les surcharges de modèles Vue personnalisés — le composant d'entrée à `/` est remplacé par un `AppIndex.vue` personnalisé lorsqu'un modèle Vue personnalisé est activé (`var/vue_templates/pages/AppIndex.vue`)

## Organisation des Vues

Les vues se trouvent dans `assets/vue/views/`, organisées par fonctionnalité :

```
views/
├── account/          # Profil utilisateur et paramètres
├── admin/            # Pages d'administration
├── assignments/      # Soumission et notation des travaux
├── attendance/       # Feuilles de présence
├── blog/             # Articles de blog et commentaires
├── branch/           # Gestion des campus de réseau
├── buycourses/       # Flux d'achat de cours
├── ccalendarevent/   # Calendrier de cours
├── course/           # Liste des cours, page d'accueil, création, catalogue
├── coursecategory/   # Gestion des catégories de cours
├── coursemaintenance/# Sauvegarde/restauration des cours
├── ctoolintro/       # Pages d'introduction aux outils
├── documents/        # Liste des documents, création, génération de médias
├── dropbox/          # Dropbox / échange de fichiers
├── filemanager/      # Navigateur de fichiers
├── glossary/         # Liste et gestion des termes du glossaire
├── links/            # Liens externes
├── lp/               # Lecteur et éditeur de parcours d'apprentissage
├── message/          # Boîte de réception et messagerie
├── page/             # Pages statiques CMS
├── pageLayout/       # Enveloppes de mise en page
├── personalfile/     # Espace de fichiers personnels
├── room/             # Salles virtuelles
├── sessionadmin/     # Administration des sessions
├── skill/            # Compétences et aptitudes
├── social/           # Réseau social
├── terms/            # Conditions d'utilisation
├── user/             # Gestion des utilisateurs et listes de cours/sessions
├── usergroup/        # Groupes d'utilisateurs (classes)
└── userreluser/      # Relations entre utilisateurs (amis/suivis)
```