Como lidar com o roteamento no Vue com o Vue Router

O Vue Router, uma ferramenta de referência concebida especificamente para a estrutura Vue, permite o desenvolvimento de aplicações de página única (SPAs). Ao utilizar o Vue Router, os programadores podem atribuir os componentes individuais da sua aplicação Web a rotas de browser específicas, controlar o histórico de navegação da aplicação e configurar várias configurações de encaminhamento complexas.

Introdução ao Vue Router

O Vue Router pode ser inicializado executando um comando específico usando o Node Package Manager no diretório desejado para estabelecer um aplicativo Vue.

 npm create vue

A aplicação de página única deve ser equipada com o Vue Router? Seleccione “Sim” se a sua resposta for afirmativa.

Abra o seu projeto no editor de texto pretendido e certifique-se de que a pasta “src

A pasta router contém um ficheiro index.js crucial que é responsável pela gestão do sistema de encaminhamento da sua aplicação. Este ficheiro index.js incorpora duas funções essenciais, createRouter e createWebHistory, que são importadas do pacote vue-router.

A função createRouter é responsável pela criação de uma nova configuração de rotas, utilizando um objeto que contém dois elementos críticos, nomeadamente as chaves history e routes . A chave routes é uma matriz composta por vários objectos que fornecem detalhes específicos sobre a configuração de cada rota individual. Como se pode ver na ilustração em anexo, estas configurações são definidas em pormenor na chave routes .

Uma vez efectuada a configuração das rotas, é necessário exportar a instância do router e importá-la para o ficheiro 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')
 

O processo acima descrito envolveu a utilização da função router dentro do ficheiro main.js, empregando-a posteriormente na aplicação Vue através da implementação da metodologia use.

É possível utilizar a configuração de roteamento mencionada acima em sua aplicação Vue implementando um trecho de código semelhante ao seguinte, que envolve a organização das informações de roteamento em um objeto e a especificação do caminho apropriado para cada rota.

 <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 exemplo de código acima ilustra a utilização do Vue Router em um componente Vue, importando não apenas o componente RouterLink, mas também o componente RouterView da biblioteca vue-router.

O segmento de código acima mencionado incorpora dois componentes RouterLink que estabelecem ligações com as páginas “Home” e “About”, respetivamente. Estas ligações são criadas utilizando a funcionalidade do componente RouterLink em que o atributo ’to’ determina a rota que é activada ao clicar na respectiva ligação. Neste caso, existe um link direcionado para a rota raiz (’/’) e outro direcionado para a rota ‘/sobre’.

O componente funciona como um antigo recetáculo para a substância da rota atual. Ao navegar para outra rota, o componente correlativo a essa rota será depositado no componente.

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

O Vue Router permite a transmissão de parâmetros e valores de consulta para rotas. Parâmetros são as partes mutáveis do URL, simbolizadas por

Para habilitar o roteamento parametrizado nos caminhos da aplicação, você deve criar meticulosamente a rota desejada no arquivo index.js do seu Vue Router.

 //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 trecho de código mencionado acima exibe uma instância de um roteador, que engloba dois caminhos distintos. O primeiro caminho é designado como “home”, enquanto o segundo é chamado de “developer”. Este último caminho foi concebido para apresentar dados relativos ao número de perfil de um programador específico.

Modifique o ficheiro App.vue para que se assemelhe ao seguinte fragmento de código:

 <!-- 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 trecho de código mencionado acima estabelece a variável de desenvolvedor como um objeto reativo com dois atributos, ou seja, nome e perfil. Posteriormente, o segundo componente RouterLink direciona a navegação para o componente devView. A partir deste ponto, é possível obter o valor do parâmetro passado no URL na secção de modelo ou JavaScript do componente devView.

Para obter o valor dentro do bloco template do componente “devView”, o Vue oferece a utilização do método “$route”, que apresenta um objeto contendo detalhes sobre as características do URL, como seu caminho completo, parâmetros de consulta e componentes definidos.

Para obter acesso ao perfil de um desenvolvedor específico dentro do componente devView utilizando o método $route, é possível seguir estas etapas:

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

O segmento de código mencionado acima ilustra a utilização do serviço $route para recuperar e exibir o valor do parâmetro profileNumber no modelo do componente.

A propriedade params no método $route representa os parâmetros que são especificados numa rota. Ao renderizar o componente pelo Vue, ele substitui o valor de $route.params.profileNumber pelo parâmetro real que é passado no URL.

Visitar o URL “/developer/123” resulta na apresentação de uma mensagem com a seguinte redação: “This

Para obter as informações relativas à rota num bloco JavaScript dentro do seu componente,

 <!-- 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>
 

Na implementação inicial, o parâmetro da rota foi recuperado diretamente através do objeto “$route” dentro do modelo. No entanto, na versão revista, a função “useRoute” foi importada do pacote “vue-router” e atribuída a uma variável. Esta variável é posteriormente utilizada no modelo do componente Vue.

Ao utilizar a função useRoute() , é possível aderir à estratégia de composição da API defendida pelo Vue 3, que utiliza plenamente o sistema reativo, facilitando assim as actualizações automáticas no componente quando os parâmetros da rota sofrem alterações.

Adicionando consultas às rotas do seu aplicativo

Uma string de consulta, também conhecida como parâmetro de consulta, é um aspeto opcional de um localizador uniforme de recursos (URL) que segue o ponto de interrogação “?”. Permite que informações adicionais sejam transmitidas dentro do mesmo pedido. Como ilustração, considere o caminho “/search?name=vue”, em que “name=vue” constitui uma cadeia de consulta com “name” a servir de palavra-chave e “vue” como o valor correspondente.

A utilização do atributo de consulta no componente RouterLink permite a adição de parâmetros a uma rota especificada no Vue Router. Isto é conseguido através da incorporação de um objeto com pares chave-valor como valor para a propriedade query, que serve como meio de representar os parâmetros acima mencionados.Uma demonstração desta implementação teria o seguinte aspeto:

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

Ao incorporar uma consulta num caminho, é possível recuperar os parâmetros de consulta nos componentes Vue utilizando o

A utilização de um parâmetro de consulta num constituinte pode ser demonstrada da seguinte forma:

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

Este trecho de código ilustra o processo de recuperação e exibição do valor de um parâmetro de consulta, denominado “nome”, do URL utilizando o

Definindo um Fallback (404) Página

O Vue Router permite a especificação de uma rota padrão, que deve ser considerada como a única concorrente no caso de nenhum outro caminho ser compatível com o localizador uniforme de recursos. Esta disposição serve o objetivo de apresentar uma página Web “Não encontrado”, que inclui normalmente uma indicação da indisponibilidade do material solicitado e quaisquer informações adicionais que possam ajudar a resolver o problema ou orientar o utilizador para recursos alternativos.

Como posso ajudá-lo hoje?

     {
      path:'/:pathName(.*)',
      name: 'NotFound',
      component: () => import('../views/NotFoundView.vue')
    }
 

O componente /:pathName significa uma secção dinâmica do URL e (.\*) é uma expressão regular JavaScript que é utilizada para reconhecer quaisquer caracteres a seguir à parte variável da rota, permitindo assim que a rota corresponda a qualquer caminho.

Quando um utilizador navega para um URL que não corresponde a nenhuma das rotas definidas na aplicação, o Vue apresentará o comportamento de mostrar o componente NotFoundView. Esse mecanismo é utilizado como um meio de lidar com respostas de erro HTTP 404 ou apresentar uma página de backup quando uma rota necessária não pode ser localizada.

Aprenda a criar animações no Vue

A utilização do Vue Router expandiu-se para além da gestão básica de rotas, incorporando funcionalidades como a adição de parâmetros de consulta e páginas de recurso para tratar erros 404. O roteador também suporta roteamento dinâmico e aninhado, oferecendo maior flexibilidade na definição de rotas complexas para a navegação de um aplicativo.

A incorporação de efeitos de animação e transição entre vários componentes num portal Web pode melhorar significativamente a experiência geral do utilizador. Para gerar esses efeitos visuais, é necessário tornar-se proficiente na implementação de transições e animações usando Vue.js, com o objetivo final de criar um site mais perfeito, cativante e superior.