> 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/3.x/pt/guia-do-programador/developer-guide/frontend/views-and-routing.md).

# Vistas e Encaminhamento

O Chamilo possui um grande conjunto de views Vue (componentes ao nível da página) ligadas através do Vue Router. Os ficheiros reais encontram-se em `assets/vue/views/`.

## Router Architecture

O router é definido em `assets/vue/router/index.js` utilizando `createWebHistory` para URLs limpas.

As rotas são modulares — organizadas em ficheiros de rotas por funcionalidade importados no router principal:

| Route module        | Pages                                                  |
| ------------------- | ------------------------------------------------------ |
| `admin`             | Páginas do painel de administração                     |
| `sessionAdmin`      | Páginas de administração de sessões                    |
| `course`            | Lista de cursos, criação, página inicial, catálogo     |
| `account`           | Perfil e definições do utilizador                      |
| `personalfile`      | Espaço de ficheiros pessoais                           |
| `message`           | Mensagens / caixa de entrada                           |
| `user`              | Páginas de gestão de utilizadores                      |
| `usergroup`         | Páginas de grupos de utilizadores (turmas)             |
| `userreluser`       | Páginas de relações entre utilizadores (amigos/seguir) |
| `ccalendarevent`    | Calendário e agenda do curso                           |
| `ctoolintro`        | Páginas de introdução às ferramentas do curso          |
| `page`              | Páginas CMS estáticas                                  |
| `pageLayout`        | Invólucros de layout de página                         |
| `publicPage`        | Páginas de acesso público                              |
| `social`            | Páginas da rede social                                 |
| `filemanager`       | Gestor de ficheiros (navegador de documentos do curso) |
| `skill`             | Páginas de competências e skills                       |
| `accessurl`         | Páginas de gestão multi-URL (portal)                   |
| `branch`            | Páginas de campus de sucursal / rede                   |
| `room`              | Páginas de salas virtuais                              |
| `buycourses`        | Páginas de compra de cursos                            |
| `documents`         | Gestão de documentos                                   |
| `assignments`       | Fluxo de trabalhos                                     |
| `links`             | Gestão de ligações externas                            |
| `glossary`          | Gestão de glossário                                    |
| `attendance`        | Controlo de assiduidade                                |
| `lp`                | Reprodutor e editor de percursos de aprendizagem       |
| `dropbox`           | Dropbox / troca de ficheiros                           |
| `blog`              | Páginas de blogue                                      |
| `blogAdmin`         | Administração de blogue                                |
| `coursemaintenance` | Cópia de segurança e restauro de cursos                |
| `catalogue`         | Catálogos de cursos e sessões                          |

## Key Routes

| Path                 | View                                       | Description                              |
| -------------------- | ------------------------------------------ | ---------------------------------------- |
| `/`                  | `AppIndex.vue` (or custom)                 | Ponto de entrada da aplicação            |
| `/home`              | `pages/Home.vue`                           | Página inicial da plataforma             |
| `/login`             | `pages/Login.vue`                          | Página de início de sessão               |
| `/courses`           | `views/user/courses/List.vue`              | Cursos em que o utilizador está inscrito |
| `/sessions`          | `views/user/sessions/SessionsCurrent.vue`  | Sessões atuais                           |
| `/sessions/past`     | `views/user/sessions/SessionsPast.vue`     | Sessões passadas                         |
| `/sessions/upcoming` | `views/user/sessions/SessionsUpcoming.vue` | Sessões futuras                          |
| `/course/:id/home`   | `views/course/CourseHome.vue`              | Página inicial do curso                  |
| `/account/home`      | `views/account/Home.vue`                   | Perfil do utilizador                     |
| `/admin`             | Admin views                                | Painel de administração                  |
| `/faq`               | `pages/Faq.vue`                            | Página de FAQ                            |

## Route Guards

O router utiliza navigation guards (declarados com `beforeEach` e `afterEach`) para:

* Verificar o estado de autenticação através de `useSecurityStore` e redirecionar utilizadores não autenticados para `/login`
* Verificar o contexto do curso através de `useCidReqStore`
* Aplicar classes CSS de tipo de página durante a navegação SPA (substituindo o que o `PageHelper` do Twig faria num carregamento completo de página)
* Suportar substituições personalizadas de templates Vue — o componente de entrada em `/` é trocado por um `AppIndex.vue` personalizado quando um template Vue personalizado está ativado (`var/vue_templates/pages/AppIndex.vue`)

## View Organization

As views encontram-se em `assets/vue/views/`, organizadas por funcionalidade:

```
views/
├── account/          # User profile and settings
├── admin/            # Admin pages
├── assignments/      # Assignment submission and grading
├── attendance/       # Attendance sheets
├── blog/             # Blog posts and comments
├── branch/           # Network campus management
├── buycourses/       # Course purchase flow
├── ccalendarevent/   # Course calendar
├── course/           # Course list, home, creation, catalog
├── coursecategory/   # Course category management
├── coursemaintenance/# Course backup/restore
├── ctoolintro/       # Tool introduction pages
├── documents/        # Document list, creation, media generation
├── dropbox/          # Dropbox / file exchange
├── filemanager/      # File browser
├── glossary/         # Glossary list and term management
├── links/            # External links
├── lp/               # Learning path player and editor
├── message/          # Inbox and messaging
├── page/             # CMS static pages
├── pageLayout/       # Page layout wrappers
├── personalfile/     # Personal file space
├── room/             # Virtual rooms
├── sessionadmin/     # Session administration
├── skill/            # Skills and competencies
├── social/           # Social network
├── terms/            # Terms of service
├── user/             # User management and course/session lists
├── usergroup/        # User groups (classes)
└── userreluser/      # User relationships (friends/follows)
```