Como lidar com o roteamento no Vue com o roteador Vue

Configure um sistema de roteamento robusto para seu aplicativo Vue usando o Vue Router.

O Vue Router, o roteador oficial do Vue, possibilita a construção de aplicativos de página única (SPAs) em Vue. O Vue Router permite mapear os componentes do seu aplicativo da web para diferentes rotas do navegador, gerenciar a pilha de histórico do seu aplicativo e configurar opções avançadas de roteamento.

Primeiros passos com o roteador Vue

Para começar a usar o Vue Router, execute o seguinte comando npm (Node Package Manager) em seu diretório preferido para criar seu aplicativo Vue:

npm create vue

Quando for perguntado se você deseja adicionar o Vue Router para desenvolvimento de aplicativos de página única, selecione Sim.

A seguir, abra seu projeto no editor de texto de sua preferência. O diretório src do seu aplicativo deve incluir uma pasta router.

A pasta router abriga um arquivo index.js contendo o código JavaScript para lidar com rotas em seu aplicativo. O arquivo index.js importa duas funções do pacote vue-router: createRouter e createWebHistory.

A função createRouter cria uma nova configuração de rota a partir de um objeto. Este objeto contém as chaves histórico e rotas e seus valores. A chave routes é um array de objetos que detalha a configuração de cada rota, como pode ser visto na imagem acima.

Depois de configurar suas rotas, você precisa exportar esta instância do roteador e importá-la para o 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')

Você importou a função roteador para o arquivo main.js e então fez seu aplicativo Vue usar esta função de roteador com o método use.

Você pode então aplicar suas rotas ao seu aplicativo Vue estruturando um bloco de código semelhante ao abaixo:

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>
<template>
  <header>
    <nav>
      <RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink>
    </nav>
  </header>
  <RouterView />
</template>

O bloco de código acima demonstra o uso do Vue Router em um componente Vue. O trecho de código importa dois componentes da biblioteca vue-router: RouterLink e RouterView.

Os componentes RouterLink criam links para as páginas Home e Sobre no trecho de código acima. O atributo to especifica o caminho para a rota que você navega ao clicar no link. Aqui, você tem um link apontando para a rota raiz ("/") e outro link apontando para a rota "/about".

O componente renderiza o componente associado à rota atual. Ele atua como um espaço reservado onde o conteúdo da rota atual será renderizado. Ao navegar para uma rota diferente, o componente associado a essa rota será renderizado dentro do componente.

Adicionando parâmetros às rotas da sua aplicação

O Vue Router permite passar parâmetros e consultas para rotas. Os parâmetros são partes dinâmicas do URL, indicadas por dois pontos ":".

Para configurar seu Vue Router para capturar parâmetros nas rotas do aplicativo, configure a rota específica em seu arquivo index.js:

//index.js
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "home",
      component: HomeView,
    },
    {
      path: "/developer/:profileNumber",
      name: "developer",
      component: () => import("../views/devView.vue"),
    },
  ],
});

O bloco de código acima mostra uma instância de roteador com duas rotas: home e developer. A rota do desenvolvedor mostra informações sobre um desenvolvedor específico com base no número do perfil do desenvolvedor.

Agora modifique seu arquivo App.vue para se parecer com o trecho de código abaixo:

<!-- App.vue -->
<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="/">Home</RouterLink>
      <RouterLink :to="{ path: `/developer/${developer.profile}` }">
       Dev Profile
     </RouterLink>
    </nav>
  </header>
  <RouterView />
</template>

O bloco de código acima define a variável developer como um objeto reativo com duas propriedades: nome e perfil. Em seguida, o segundo componente RouterLink é roteado para o componente devView. Agora você pode acessar o valor do parâmetro passado para o URL no bloco de modelo ou bloco JavaScript do componente devView.

Para acessar esse valor no bloco template do componente devView, o Vue fornece um método $route, um objeto contendo propriedades que detalham as informações da URL. Essas informações incluem fullPath, consultas, parâmetros e componentes.

Aqui está um exemplo de como acessar o perfil de um desenvolvedor específico no componente devView com o método $route:

<!-- devView.vue -->
<template>
  <div>
    <h1>This is developer {{ $route.params.profileNumber }} about page</h1>
  </div>
</template>

O trecho de código acima demonstra como usar o método $route para acessar e exibir o valor do parâmetro profileNumber no modelo do componente.

A propriedade params no método $route contém os parâmetros que você define em uma rota. Quando o Vue renderiza este componente, ele substitui o valor de $route.params.profileNumber pelo valor real que você passa na URL.

Por exemplo, se você visitar /developer/123, a mensagem exibida será "Esta é a página sobre do desenvolvedor 123".

Você também pode acessar as informações da rota no bloco JavaScript do seu componente. Por exemplo:

<!-- devView.vue -->
<script setup>
import { useRoute } from "vue-router";
const route = useRoute();
</script>
<template>
  <div>
    <h1>This is developer {{ route.params.profileNumber }} about page</h1>
  </div>
</template>

No bloco de código anterior, você acessou o objeto $route diretamente no modelo para recuperar os parâmetros da rota. Entretanto, no bloco de código atualizado, você importou a função useRoute() do pacote vue-router. Você atribuiu a função a uma variável que usou no modelo do seu componente Vue.

Com useRoute(), você segue a abordagem da API de composição do Vue 3 aproveitando o sistema de reatividade. Isso garante que o componente será atualizado automaticamente quando os parâmetros da rota forem alterados.

Adicionando consultas às rotas da sua aplicação

Consultas, ou strings de consulta, 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 string de consulta onde name é a chave e vue é o valor.

Para adicionar uma consulta a uma rota no Vue Router, você pode usar a propriedade query do objeto to no componente RouterLink. A propriedade query deve ser um objeto onde cada par chave-valor representa um parâmetro de consulta. Aqui está um exemplo:

<RouterLink :to="{ name: 'home', query: {name: 'vue'}}">Home</RouterLink>

Após adicionar uma consulta a uma rota, você pode acessar os parâmetros de consulta em seus componentes Vue. Você pode fazer isso com o objeto $route ou a função useRoute, semelhante a adicionar parâmetros de rota.

Aqui está um exemplo de como você usa um parâmetro de consulta em um componente:

<!-- HomeView.vue -->
<template>
  {{ $route.query.name }}
</template>

Este trecho de código demonstra como acessar e renderizar o valor de um parâmetro de consulta (nome) da URL usando o objeto $route.query dentro do modelo de um Vue.js componente.

Definindo uma página substituta (404)

O Vue Router permite que você defina uma rota substituta que será correspondida quando nenhuma outra rota corresponder ao URL. Isto é útil para exibir uma página "404 Not Found".

Veja como você pode definir uma rota alternativa com o 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. Isso permite que a rota corresponda a qualquer caminho.

Quando um usuário navega para uma URL que não corresponde a nenhuma outra rota, o Vue renderizará o componente NotFoundView. Você usa essa abordagem para lidar com erros 404 ou exibir uma página substituta quando uma rota solicitada não é encontrada.

Aprenda a criar animações em Vue

Você aprendeu como adicionar parâmetros e consultas às rotas da sua aplicação. Você também aprendeu como definir uma página substituta para lidar com erros 404. O Vue Router oferece muito mais funcionalidades, como definir rotas dinâmicas e aninhadas.