# 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 devoirs | | `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 devoirs ├── 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: 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/chamilo-2-francais/guide-du-developpeur/developer-guide/frontend/views-and-routing.md?ask= ``` 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.