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

# Visualizações e Roteamento

O Chamilo possui um amplo conjunto de visualizações Vue (componentes de nível de página) conectadas por meio do Vue Router. Os arquivos reais estão localizados em `assets/vue/views/`.

## Arquitetura do Roteador

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

As rotas são modulares — organizadas em arquivos de rota por funcionalidade, importados para o roteador principal:

| Módulo de Rota      | Páginas                                                      |
| ------------------- | ------------------------------------------------------------ |
| `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 configurações do usuário                            |
| `personalfile`      | Espaço de arquivos pessoais                                  |
| `message`           | Mensagens / caixa de entrada                                 |
| `user`              | Páginas de gerenciamento de usuários                         |
| `usergroup`         | Páginas de grupos de usuários (turmas)                       |
| `userreluser`       | Páginas de relacionamento entre usuários (amigos/seguidores) |
| `ccalendarevent`    | Calendário e agenda do curso                                 |
| `ctoolintro`        | Páginas de introdução às ferramentas do curso                |
| `page`              | Páginas estáticas de CMS                                     |
| `pageLayout`        | Envoltórios de layout de página                              |
| `publicPage`        | Páginas acessíveis publicamente                              |
| `social`            | Páginas de rede social                                       |
| `filemanager`       | Gerenciador de arquivos (navegador de documentos do curso)   |
| `skill`             | Páginas de habilidades e competências                        |
| `accessurl`         | Páginas de gerenciamento de multi-URL (portal)               |
| `branch`            | Páginas de filial / campus da rede                           |
| `room`              | Páginas de salas virtuais                                    |
| `buycourses`        | Páginas de compra de cursos                                  |
| `documents`         | Gerenciamento de documentos                                  |
| `assignments`       | Fluxo de trabalho de tarefas                                 |
| `links`             | Gerenciamento de links externos                              |
| `glossary`          | Gerenciamento de glossário                                   |
| `attendance`        | Rastreamento de presença                                     |
| `lp`                | Player e editor de trilhas de aprendizagem                   |
| `dropbox`           | Dropbox / troca de arquivos                                  |
| `blog`              | Páginas de blog                                              |
| `blogAdmin`         | Administração de blog                                        |
| `coursemaintenance` | Backup e restauração de cursos                               |
| `catalogue`         | Catálogos de cursos e sessões                                |

## Rotas Principais

| Caminho              | Visualização                               | Descrição                      |
| -------------------- | ------------------------------------------ | ------------------------------ |
| `/`                  | `AppIndex.vue` (ou personalizado)          | Ponto de entrada da aplicação  |
| `/home`              | `pages/Home.vue`                           | Página inicial da plataforma   |
| `/login`             | `pages/Login.vue`                          | Página de login                |
| `/courses`           | `views/user/courses/List.vue`              | Cursos inscritos do usuário    |
| `/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 usuário              |
| `/admin`             | Visualizações de administrador             | Painel de administração        |
| `/faq`               | `pages/Faq.vue`                            | Página de perguntas frequentes |

## Guardas de Rota

O roteador utiliza guardas de navegação (declaradas com `beforeEach` e `afterEach`) para:

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

## Organização de Visualizações

As visualizações estão em `assets/vue/views/`, organizadas por funcionalidade:

```
views/
├── account/          # Perfil e configurações do usuário
├── admin/            # Páginas de administrador
├── assignments/      # Envio e avaliação de tarefas
├── attendance/       # Folhas de presença
├── blog/             # Postagens e comentários de blog
├── branch/           # Gerenciamento de campus da rede
├── buycourses/       # Fluxo de compra de cursos
├── ccalendarevent/   # Calendário do curso
├── course/           # Lista de cursos, página inicial, criação, catálogo
├── coursecategory/   # Gerenciamento de categorias de cursos
├── coursemaintenance/# Backup/restauração de cursos
├── ctoolintro/       # Páginas de introdução às ferramentas
├── documents/        # Lista de documentos, criação, geração de mídia
├── dropbox/          # Dropbox / troca de arquivos
├── filemanager/      # Navegador de arquivos
├── glossary/         # Lista de glossário e gerenciamento de termos
├── links/            # Links externos
├── lp/               # Player e editor de trilhas de aprendizagem
├── message/          # Caixa de entrada e mensagens
├── page/             # Páginas estáticas de CMS
├── pageLayout/       # Envoltórios de layout de página
├── personalfile/     # Espaço de arquivos pessoais
├── room/             # Salas virtuais
├── sessionadmin/     # Administração de sessões
├── skill/            # Habilidades e competências
├── social/           # Rede social
├── terms/            # Termos de serviço
├── user/             # Gerenciamento de usuários e listas de cursos/sessões
├── usergroup/        # Grupos de usuários (turmas)
└── userreluser/      # Relacionamentos entre usuários (amigos/seguidores)
```