> 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-nl/ontwikkelaarsgids/developer-guide/frontend/views-and-routing.md).

# Weergaven en Routing

Chamilo beschikt over een uitgebreide set Vue-weergaven (componenten op paginaniveau) die verbonden zijn via Vue Router. De daadwerkelijke bestanden bevinden zich onder `assets/vue/views/`.

## Router Architectuur

De router is gedefinieerd in `assets/vue/router/index.js` met gebruik van `createWebHistory` voor schone URL's.

Routes zijn modulair — georganiseerd in routebestanden per functie die worden geïmporteerd in de hoofdrouter:

| Routemodule         | Pagina's                                      |
| ------------------- | --------------------------------------------- |
| `admin`             | Beheerpanelen                                 |
| `sessionAdmin`      | Sessiebeheerderspagina's                      |
| `course`            | Cursuslijst, aanmaak, startpagina, catalogus  |
| `account`           | Gebruikersprofiel en instellingen             |
| `personalfile`      | Persoonlijke bestandsruimte                   |
| `message`           | Berichten / inbox                             |
| `user`              | Gebruikersbeheerpagina's                      |
| `usergroup`         | Gebruikersgroep (klas) pagina's               |
| `userreluser`       | Gebruikersrelatie (vriend/volgen) pagina's    |
| `ccalendarevent`    | Cursuskalender en agenda                      |
| `ctoolintro`        | Introductiepagina's voor cursusgereedschappen |
| `page`              | Statische CMS-pagina's                        |
| `pageLayout`        | Paginalay-out wrappers                        |
| `publicPage`        | Publiek toegankelijke pagina's                |
| `social`            | Sociale netwerkpagina's                       |
| `filemanager`       | Bestandsbeheerder (cursusdocumentenbrowser)   |
| `skill`             | Vaardigheden en competentiepagina's           |
| `accessurl`         | Multi-URL (portaal) beheerpagina's            |
| `branch`            | Filiaal / netwerkcampussen pagina's           |
| `room`              | Virtuele ruimte pagina's                      |
| `buycourses`        | Cursusaankoop pagina's                        |
| `documents`         | Documentbeheer                                |
| `assignments`       | Opdrachtenworkflow                            |
| `links`             | Beheer van externe links                      |
| `glossary`          | Woordenlijstbeheer                            |
| `attendance`        | Aanwezigheidsregistratie                      |
| `lp`                | Leerpadspeler en -editor                      |
| `dropbox`           | Dropbox / bestandsuitwisseling                |
| `blog`              | Blogpagina's                                  |
| `blogAdmin`         | Blogbeheer                                    |
| `coursemaintenance` | Cursusback-up en herstel                      |
| `catalogue`         | Cursus- en sessiecatalogi                     |

## Belangrijke Routes

| Pad                  | Weergave                                   | Beschrijving                                    |
| -------------------- | ------------------------------------------ | ----------------------------------------------- |
| `/`                  | `AppIndex.vue` (of aangepast)              | Toegangspunt van de applicatie                  |
| `/home`              | `pages/Home.vue`                           | Startpagina van het platform                    |
| `/login`             | `pages/Login.vue`                          | Inlogpagina                                     |
| `/courses`           | `views/user/courses/List.vue`              | Cursussen waarvoor de gebruiker is ingeschreven |
| `/sessions`          | `views/user/sessions/SessionsCurrent.vue`  | Huidige sessies                                 |
| `/sessions/past`     | `views/user/sessions/SessionsPast.vue`     | Voorbije sessies                                |
| `/sessions/upcoming` | `views/user/sessions/SessionsUpcoming.vue` | Aankomende sessies                              |
| `/course/:id/home`   | `views/course/CourseHome.vue`              | Startpagina van de cursus                       |
| `/account/home`      | `views/account/Home.vue`                   | Gebruikersprofiel                               |
| `/admin`             | Beheerweergaven                            | Beheerpaneel                                    |
| `/faq`               | `pages/Faq.vue`                            | FAQ-pagina                                      |

## Routebewaking

De router gebruikt navigatiebewakers (gedeclareerd met `beforeEach` en `afterEach`) om:

* De authenticatiestatus te controleren via `useSecurityStore` en niet-geauthenticeerde gebruikers door te sturen naar `/login`
* De cursuscontext te verifiëren via `useCidReqStore`
* CSS-klassen voor paginatypes toe te passen tijdens SPA-navigatie (ter vervanging van wat Twig's `PageHelper` zou doen bij een volledige paginalading)
* Aangepaste Vue-sjabloonoverschrijvingen te ondersteunen — het toegangsonderdeel op `/` wordt vervangen door een aangepaste `AppIndex.vue` wanneer een aangepast Vue-sjabloon is ingeschakeld (`var/vue_templates/pages/AppIndex.vue`)

## Organisatie van Weergaven

Weergaven bevinden zich in `assets/vue/views/`, georganiseerd per functie:

```
views/
├── account/          # Gebruikersprofiel en instellingen
├── admin/            # Beheerpagina's
├── assignments/      # Opdrachten indienen en beoordelen
├── attendance/       # Aanwezigheidslijsten
├── blog/             # Blogberichten en reacties
├── branch/           # Netwerkcampusbeheer
├── buycourses/       # Cursusaankoopproces
├── ccalendarevent/   # Cursuskalender
├── course/           # Cursuslijst, startpagina, aanmaak, catalogus
├── coursecategory/   # Cursuscategoriebeheer
├── coursemaintenance/# Cursusback-up/herstel
├── ctoolintro/       # Introductiepagina's voor gereedschappen
├── documents/        # Documentlijst, aanmaak, mediageneratie
├── dropbox/          # Dropbox / bestandsuitwisseling
├── filemanager/      # Bestandsbrowser
├── glossary/         # Woordenlijst en termenbeheer
├── links/            # Externe links
├── lp/               # Leerpadspeler en -editor
├── message/          # Inbox en berichten
├── page/             # CMS statische pagina's
├── pageLayout/       # Paginalay-out wrappers
├── personalfile/     # Persoonlijke bestandsruimte
├── room/             # Virtuele ruimtes
├── sessionadmin/     # Sessiebeheer
├── skill/            # Vaardigheden en competenties
├── social/           # Sociaal netwerk
├── terms/            # Gebruiksvoorwaarden
├── user/             # Gebruikersbeheer en cursus-/sessielijsten
├── usergroup/        # Gebruikersgroepen (klassen)
└── userreluser/      # Gebruikersrelaties (vrienden/volgers)
```


---

# 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-nl/ontwikkelaarsgids/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.