Introdução ao Roteamento e Definição de Rotas no Vue 3

Uma das funcionalidades essenciais em aplicações web é a configuração de rotas. O Vue 3 possui um sistema de roteamento completo, que permite associar requisições a componentes específicos. Esse sistema é fornecido pela biblioteca vue-router. Vale destacar que tanto o Vue 3 quanto a versão atual do vue-router apresentam uma estrutura diferente daquela usada no Vue 2. Esse detalhe precisa ser considerado ao migrar projetos de versões anteriores.

No exemplo a seguir, é construída um aplicação simples que utiliza rotas. O arquivo index.html, localizado na raiz do projeto, possui o seguinte conteúdo:

<!DOCTYPE html>
<html>
<head>
    <title>Roteamento no Vue 3</title>
    <meta charset="utf-8" />
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-router"></script>
</head>
<body>
    <div id="app">
    <h1>Vue Routing</h1>
    <router-view></router-view>
    </div>
    <script>
    const Home = { template: '<h2>Home Page</h2>' }
    const About = { template: '<h2>About Page</h2>' }

    const routes = [
        { path: '/', component: Home },
        { path: '/about', component: About }
    ];

    const router = VueRouter.createRouter({
        history: VueRouter.createWebHistory(),
        routes,
    });

    const app = Vue.createApp({});
    app.use(router);
    app.mount('#app');
    </script>
</body>
</html>

Para que o roteamento funcione, é necessário carregar a biblioteca vue-router no início do arquivo. O código acima utiliza a versão 4, compatível com Vue 3.

Dois componentes são definidos: Home e About. Cada um é responsável por renderizar o conteúdo associado ao respectivo caminho. Em seguida, é criado um array de rotas, no qual cada rota define um path (a URL que será acessada) e um component (o componente correspondente àquela rota).

A rota com path: '/' está associada ao componente Home, que será exibido quando a URL corresponder ao endereço base da aplicação. A rota com path: '/about' está ligada ao componente About. Quando a aplicação recebe uma requisição, os caminhos são avaliados na ordem definida, e o primeiro que corresponder à URL solicitada será utilizado.

O roteador é criado com a função VueRouter.createRouter(), fornecida pela biblioteca vue-router. Essa função recebe um objeto de configuração que define, no mínimo, duas opções: history e routes.

O valor de history é definido com o retorno da função VueRouter.createWebHistory(), que ativa o modo de navegação baseado em HTML5. Esse modo evita o uso do caractere # na URL (URLs com hash eram usadas no Vue 2).

A configuração routes define as rotas que o roteador reconhecerá. No exemplo, é utilizado o array de rotas criado anteriormente.

O roteador é registrado na aplicação com app.use(router). No HTML, o componente <router-view> serve como ponto de montagem onde o componente correspondente à rota atual será renderizado.

O roteamento requer que a aplicação seja executada em um servidor. Abrir o arquivo HTML diretamente no navegador não permite o funcionamento completo da navegação. Para esse exemplo, é utilizado o Node.js como servidor local, uma opção simples e acessível. No entanto, outras soluções também são compatíveis, como servidores web IIS e Apache, ou tecnologias de back-end como ASP.NET, PHP, Django, Ruby e JakartaEE.

Servidor com Node.js

Antes de tudo, é necessário instalar o Node.js. Esse processo está detalhado no artigo O que é Node.js: introdução.

Com o Node.js instalado, crie um novo arquivo chamado app.js na mesma pasta onde está o arquivo index.html.

const http = require("http");
const fs = require("fs");

http.createServer((request, response) => {
    fs.readFile("index.html", function(error, data) {
    if (error) {
        response.end("Erro ao ler o arquivo!");
    } else {
        response.end(data);
    }
    });
}).listen(3000, function() {
    console.log("Servidor iniciado na porta 3000");
});

O módulo http é utilizado para criar o servidor e lidar com requisições HTTP. O módulo fs é responsável por ler o arquivo HTML do disco.

A função http.createServer() recebe uma função de callback com dois parâmetros: request, que contém os dados da requisição, e response, que permite retornar a resposta ao cliente.

Por fim, o método listen() inicia o servidor na porta 3000. Para executá-lo, abra o terminal, navegue até a pasta do projeto com cd e execute:

node app.js

Após a execução, o terminal exibirá a mensagem "Server started at 3000". A aplicação estará disponível em http://localhost:3000/.

Ao acessar essa URL, a rota / será ativada e o componente Home será exibido:

Se o caminho acessado for /about, o roteador renderizará o componente About:

Vinculando rotas com componentes no Vue.js

Resumo

O roteamento em aplicações Vue 3 é realizado com a biblioteca vue-router, que fornece um sistema completo para associar caminhos a componentes.
A estrutura de roteamento no Vue 3, junto com a versão 4 do vue-router, apresenta diferenças em relação à versão anterior utilizada no Vue 2.
Cada rota é composta por um caminho (path) e por um componente (component) que será exibido quando aquele caminho for acessado.
A função createRouter é utilizada para configurar o roteador da aplicação, que recebe uma lista de rotas e uma estratégia de navegação.
O componente <router-view> atua como ponto de renderização dinâmica, exibindo o componente correspondente à rota atual.
O roteador precisa ser registrado na instância principal da aplicação Vue com app.use(router) para que a navegação funcione corretamente.