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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.chamilo.org/2.x-fr/guide-du-developpeur/developer-guide/frontend/views-and-routing.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.