Introdução ao Roteamento e Definição de Rotas no Vue.js
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
:
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.
Documentação oficial: