O Vue Router, o sistema de roteamento oficial do Vue.js, capacita a construção de aplicações web de página única (SPAs). Com o Vue Router, é possível vincular os componentes da sua aplicação web a diferentes endereços no navegador, administrar o histórico de navegação da sua aplicação e configurar opções de roteamento avançadas.
Iniciando com o Vue Router
Para começar a utilizar o Vue Router, execute o seguinte comando do npm (Node Package Manager) no diretório de sua preferência para criar sua aplicação Vue:
npm create vue
Quando perguntado se deseja incluir o Vue Router para o desenvolvimento de aplicações de página única, selecione Sim.
Em seguida, abra o projeto no seu editor de código favorito. O diretório src da sua aplicação deve conter uma pasta chamada router.
Dentro da pasta router, você encontrará um arquivo index.js, que contém o código JavaScript responsável por gerenciar as rotas na sua aplicação. Este arquivo importa duas funções do pacote vue-router: createRouter e createWebHistory.
A função createRouter estabelece uma nova configuração de roteamento a partir de um objeto. Este objeto engloba as chaves history e routes, juntamente com seus respectivos valores. A chave routes é um array de objetos, cada um especificando a configuração de uma rota individual, conforme demonstrado na imagem acima.
Após a definição das rotas, é necessário exportar a instância do roteador e importá-la no arquivo main.js:
import './assets/main.css'import { createApp } from 'vue'
import App from './App.vue'
import router from './router'const app = createApp(App)
app.use(router)
app.mount('#app')
Neste processo, a função do roteador foi importada para o arquivo main.js, e sua aplicação Vue passou a utilizá-la por meio do método use.
Você pode integrar as rotas em sua aplicação Vue através de um bloco de código similar ao seguinte:
<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script><template>
<header>
<nav>
<RouterLink to="https://www.makeuseof.com/">Início</RouterLink>
<RouterLink to="/about">Sobre</RouterLink>
</nav>
</header><RouterView />
</template>
O trecho de código acima ilustra o uso do Vue Router dentro de um componente Vue. Ele importa dois componentes da biblioteca vue-router: RouterLink e RouterView.
Os componentes RouterLink criam links para as páginas Início e Sobre. O atributo to determina o caminho para a rota que será acessada quando o link for clicado. Aqui, há um link direcionando para a rota raiz (“/”) e outro para a rota “/sobre”.
O componente exibe o componente associado à rota ativa. Ele funciona como um espaço reservado onde o conteúdo da rota atual será renderizado. Ao navegar para uma rota diferente, o componente correspondente a ela será exibido dentro do .
Adicionando Parâmetros às Rotas da Sua Aplicação
O Vue Router permite a passagem de parâmetros e consultas para as rotas. Parâmetros são partes dinâmicas do URL, sinalizadas por dois pontos “:”.
Para configurar o Vue Router de forma a capturar parâmetros nas rotas, defina a rota específica no arquivo index.js:
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: "https://www.makeuseof.com/",
name: "home",
component: HomeView,
},
{
path: "/developer/:profileNumber",
name: "developer",
component: () => import("../views/devView.vue"),
},
],
});
O trecho de código acima mostra uma instância de roteador com duas rotas: home e developer. A rota developer exibe informações sobre um desenvolvedor específico, com base no seu número de perfil.
Agora, modifique seu arquivo App.vue para que se assemelhe ao código a seguir:
<script setup>
import { ref } from "vue";
import { RouterLink, RouterView } from "vue-router";const developer = ref([
{
name: "Chinedu",
profile: 2110,
},
]);
</script><template>
<header>
<nav>
<RouterLink to="https://www.makeuseof.com/">Início</RouterLink>
<RouterLink :to="{ path: `/developer/${developer.profile}` }">
Perfil Dev
</RouterLink>
</nav>
</header><RouterView />
</template>
Este bloco de código define a variável developer como um objeto reativo com duas propriedades: nome e perfil. Em seguida, o segundo componente RouterLink direciona para o componente devView. O valor do parâmetro passado para o URL pode ser acessado no bloco de template ou no bloco JavaScript do componente devView.
Para acessar este valor no bloco de template do componente devView, o Vue oferece o método $route, um objeto que contém propriedades detalhando informações sobre o URL, como fullPath, queries, parameters e componentes.
Veja um exemplo de como acessar o perfil de um desenvolvedor específico no componente devView utilizando o método $route:
<template>
<div>
<h1>Esta é a página sobre o desenvolvedor {{ $route.params.profileNumber }}</h1>
</div>
</template>
Este trecho demonstra como utilizar o método $route para acessar e exibir o valor do parâmetro profileNumber no template do componente.
A propriedade params do método $route contém os parâmetros que foram definidos em uma rota. Quando o Vue renderiza este componente, ele substitui o valor de $route.params.profileNumber pelo valor real passado no URL.
Por exemplo, ao acessar /developer/123, a mensagem exibida será “Esta é a página sobre o desenvolvedor 123”.
É possível também acessar informações da rota no bloco JavaScript do componente. Por exemplo:
<script setup>
import { useRoute } from "vue-router";const route = useRoute();
</script><template>
<div>
<h1>Esta é a página sobre o desenvolvedor {{ route.params.profileNumber }}</h1>
</div>
</template>
No bloco de código anterior, acessamos o objeto $route diretamente no template para obter os parâmetros da rota. Já no bloco de código atualizado, importamos a função useRoute() do pacote vue-router e atribuímos essa função a uma variável utilizada no template do componente Vue.
Com useRoute(), seguimos a abordagem da API de composição do Vue 3, aproveitando o sistema de reatividade, garantindo que o componente será atualizado automaticamente quando os parâmetros da rota forem alterados.
Adicionando Consultas às Rotas da Sua Aplicação
Consultas, ou query strings, são parâmetros opcionais adicionados ao URL após um ponto de interrogação “?”. Por exemplo, na rota “/search?name=vue”, “name=vue” é uma query string onde name é a chave e vue é o valor.
Para adicionar uma consulta a uma rota no Vue Router, utilize a propriedade query do objeto to no componente RouterLink. Esta propriedade deve ser um objeto onde cada par chave-valor representa um parâmetro de consulta. Exemplo:
<RouterLink :to="{ name: 'home', query: {name: 'vue'}}">Início</RouterLink>
Após adicionar uma consulta à rota, os parâmetros de consulta podem ser acessados nos componentes Vue. Para isso, utilize o objeto $route ou a função useRoute, de forma similar à adição de parâmetros de rota.
Aqui está um exemplo de como utilizar um parâmetro de consulta em um componente:
<template>
{{ $route.query.name }}
</template>
Este trecho de código demonstra como acessar e exibir o valor de um parâmetro de consulta (nome) da URL utilizando o objeto $route.query no template de um componente Vue.js.
Definindo uma Página de Fallback (404)
O Vue Router possibilita a definição de uma rota de fallback, que será correspondida quando nenhuma outra rota coincidir com o URL. Isso é útil para exibir uma página “404 Not Found”.
Veja como definir uma rota de fallback no Vue Router:
{
path:'/:pathName(.*)',
name: 'NotFound',
component: () => import('../views/NotFoundView.vue')
}
A parte /:pathName indica um segmento dinâmico no URL, e (.*) é uma expressão regular JavaScript que corresponde a qualquer caractere após o segmento dinâmico, permitindo que a rota corresponda a qualquer caminho.
Quando um usuário acessa um URL que não corresponde a nenhuma outra rota, o Vue renderizará o componente NotFoundView, uma abordagem para tratar erros 404 ou exibir uma página de fallback quando uma rota solicitada não é encontrada.
Aprenda a Criar Animações no Vue
Você aprendeu como adicionar parâmetros e consultas às rotas da sua aplicação, além de como definir uma página de fallback para tratar erros 404. O Vue Router oferece diversas outras funcionalidades, como definir rotas dinâmicas e aninhadas.
Adicionar animações e transições entre os elementos de uma página web pode melhorar significativamente a experiência do usuário. Para criar um site mais fluido, envolvente e com uma melhor aparência geral, é crucial aprender a criar transições e animações no Vue.