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

# Ansichten und Routing

Chamilo verfügt über eine umfangreiche Sammlung von Vue-Ansichten (Komponenten auf Seitenebene), die über Vue Router verbunden sind. Die eigentlichen Dateien befinden sich unter `assets/vue/views/`.

## Router-Architektur

Der Router ist in `assets/vue/router/index.js` definiert und verwendet `createWebHistory` für saubere URLs.

Routen sind modular aufgebaut – sie sind in routenspezifische Dateien pro Funktion organisiert und werden in den Hauptrouter importiert:

| Routenmodul         | Seiten                                          |
| ------------------- | ----------------------------------------------- |
| `admin`             | Seiten des Administrationsbereichs              |
| `sessionAdmin`      | Seiten zur Verwaltung von Sitzungen             |
| `course`            | Kursliste, Erstellung, Startseite, Katalog      |
| `account`           | Benutzerprofil und Einstellungen                |
| `personalfile`      | Persönlicher Dateibereich                       |
| `message`           | Nachrichten / Posteingang                       |
| `user`              | Seiten zur Benutzerverwaltung                   |
| `usergroup`         | Seiten für Benutzergruppen (Klassen)            |
| `userreluser`       | Seiten für Benutzerbeziehungen (Freunde/Folgen) |
| `ccalendarevent`    | Kurskalender und Agenda                         |
| `ctoolintro`        | Einführungsseiten für Kurstools                 |
| `page`              | Statische CMS-Seiten                            |
| `pageLayout`        | Seitenlayout-Wrapper                            |
| `publicPage`        | Öffentlich zugängliche Seiten                   |
| `social`            | Seiten für soziale Netzwerke                    |
| `filemanager`       | Dateimanager (Kursdokumenten-Browser)           |
| `skill`             | Seiten für Fähigkeiten und Kompetenzen          |
| `accessurl`         | Seiten zur Verwaltung mehrerer URLs (Portale)   |
| `branch`            | Seiten für Zweigstellen / Netzwerk-Campusse     |
| `room`              | Seiten für virtuelle Räume                      |
| `buycourses`        | Seiten zum Kurskauf                             |
| `documents`         | Dokumentenverwaltung                            |
| `assignments`       | Arbeitsablauf für Aufgaben                      |
| `links`             | Verwaltung externer Links                       |
| `glossary`          | Verwaltung von Glossaren                        |
| `attendance`        | Anwesenheitsverfolgung                          |
| `lp`                | Lernpfad-Player und Editor                      |
| `dropbox`           | Dropbox / Dateiaustausch                        |
| `blog`              | Blog-Seiten                                     |
| `blogAdmin`         | Blog-Verwaltung                                 |
| `coursemaintenance` | Kurs-Backup und Wiederherstellung               |
| `catalogue`         | Kurs- und Sitzungskataloge                      |

## Wichtige Routen

| Pfad                 | Ansicht                                    | Beschreibung                        |
| -------------------- | ------------------------------------------ | ----------------------------------- |
| `/`                  | `AppIndex.vue` (oder benutzerdefiniert)    | Einstiegspunkt der Anwendung        |
| `/home`              | `pages/Home.vue`                           | Startseite der Plattform            |
| `/login`             | `pages/Login.vue`                          | Anmeldeseite                        |
| `/courses`           | `views/user/courses/List.vue`              | Eingeschriebene Kurse des Benutzers |
| `/sessions`          | `views/user/sessions/SessionsCurrent.vue`  | Aktuelle Sitzungen                  |
| `/sessions/past`     | `views/user/sessions/SessionsPast.vue`     | Vergangene Sitzungen                |
| `/sessions/upcoming` | `views/user/sessions/SessionsUpcoming.vue` | Kommende Sitzungen                  |
| `/course/:id/home`   | `views/course/CourseHome.vue`              | Kurs-Startseite                     |
| `/account/home`      | `views/account/Home.vue`                   | Benutzerprofil                      |
| `/admin`             | Admin-Ansichten                            | Administrationsbereich              |
| `/faq`               | `pages/Faq.vue`                            | FAQ-Seite                           |

## Routenwächter

Der Router verwendet Navigationswächter (deklariert mit `beforeEach` und `afterEach`), um:

* Den Authentifizierungsstatus über `useSecurityStore` zu überprüfen und nicht authentifizierte Benutzer zu `/login` umzuleiten
* Den Kurskontext über `useCidReqStore` zu verifizieren
* Seiten-Typ-CSS-Klassen während der SPA-Navigation anzuwenden (ersetzt, was Twig's `PageHelper` bei einem vollständigen Seitenladen tun würde)
* Benutzerdefinierte Vue-Template-Überschreibungen zu unterstützen – die Einstiegskomponente bei `/` wird gegen eine benutzerdefinierte `AppIndex.vue` ausgetauscht, wenn ein benutzerdefiniertes Vue-Template aktiviert ist (`var/vue_templates/pages/AppIndex.vue`)

## Organisation der Ansichten

Ansichten befinden sich in `assets/vue/views/` und sind nach Funktion organisiert:

```
views/
├── account/          # Benutzerprofil und Einstellungen
├── admin/            # Admin-Seiten
├── assignments/      # Einreichung und Bewertung von Aufgaben
├── attendance/       # Anwesenheitslisten
├── blog/             # Blogbeiträge und Kommentare
├── branch/           # Verwaltung von Netzwerk-Campussen
├── buycourses/       # Ablauf beim Kurskauf
├── ccalendarevent/   # Kurskalender
├── course/           # Kursliste, Startseite, Erstellung, Katalog
├── coursecategory/   # Verwaltung von Kurskategorien
├── coursemaintenance/# Kurs-Backup/Wiederherstellung
├── ctoolintro/       # Einführungsseiten für Tools
├── documents/        # Dokumentenliste, Erstellung, Mediengenerierung
├── dropbox/          # Dropbox / Dateiaustausch
├── filemanager/      # Datei-Browser
├── glossary/         # Glossarliste und Begriffsverwaltung
├── links/            # Externe Links
├── lp/               # Lernpfad-Player und Editor
├── message/          # Posteingang und Nachrichten
├── page/             # CMS-statische Seiten
├── pageLayout/       # Seitenlayout-Wrapper
├── personalfile/     # Persönlicher Dateibereich
├── room/             # Virtuelle Räume
├── sessionadmin/     # Sitzungsverwaltung
├── skill/            # Fähigkeiten und Kompetenzen
├── social/           # Soziales Netzwerk
├── terms/            # Nutzungsbedingungen
├── user/             # Benutzerverwaltung und Kurs-/Sitzungslisten
├── usergroup/        # Benutzergruppen (Klassen)
└── userreluser/      # Benutzerbeziehungen (Freunde/Folgen)
```


---

# 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-de/entwicklerhandbuch/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.