O guia definitivo para o Vue Router

Introdução

O roteamento no desenvolvimento da web é um mecanismo no qual as solicitações HTTP são roteadas para o código que as trata. Em termos mais simples, com um roteador, você determina o que deve acontecer quando um usuário visita uma determinada página em seu site.

Na era moderna dos frameworks JavaScript, o roteamento na web funciona de maneira um pouco diferente; você poderia dizer que ficou mais fácil de implementar.

No Vue, o roteamento é tratado usando o pacote Vue Router. Se o seu aplicativo da web ou site for construído com o Vue e contiver várias páginas entre as quais os usuários precisam alternar, você definitivamente precisa do Vue Router.

Objetivos

Neste tutorial, vamos para dar uma olhada em como implementar o roteamento em um aplicativo Vue usando Vue Router construindo um mini aplicativo demo.

O demo é um aplicativo que mostra informações sobre cervejarias: sua localização, tipo e website. Iremos extrair dados da API Open Brewery DB .

Lembre-se de que nós usará as versões mais recentes do Vue Router e do Vue em nosso aplicativo.

Pré-requisitos

Este tutorial presume que o leitor tenha o seguinte instalado em sua máquina:

Node.js 10.6.0 ou superior Yarn/npm Vue CLI VS código

Conhecimento prático de JavaScript e Vue é fortemente recomendado.

Você pode instalar o Vue CLI com o seguinte comando:

yarn global add @ vue/cli # OU npm install-g @ vue/cli

Primeiros passos

Estaremos usando a ferramenta Vue CLI para inicializar um novo projeto Vue. Esta ferramenta nos permite não nos preocupar com as configurações quando começamos a usar nosso aplicativo, porque podemos selecionar manualmente os pacotes necessários.

Vamos criar nosso projeto!

Abra o terminal e digite no seguinte comando para criar um novo projeto Vue:

vue create breweries-app

Haverá um prompt para escolher uma predefinição. Selecione Padrão (Vue 3) ([Vue 3] babel, eslint) e configure rapidamente.

Com o Vue CLI, podemos instalar o pacote do Vue Router e deixá-lo configurar automaticamente escolhendo a opção Selecionar recursos manualmente e, em seguida, escolhendo Vue Router como parte da configuração do nosso projeto. Mas isso não seria muito divertido, seria?

Por causa deste tutorial, aprenderemos como instalar e configurar manualmente o Roteador Vue.

Agora, mude para a pasta do projeto com o seguinte comando:

cd breweries-app

Em seguida, inicie o projeto assim:

yarn serve #OR npm run serve

Você pode visitar o aplicativo em execução no https://localhost: 8080 .

Criando nossas visualizações

Antes de prosseguirmos para o carne de nosso projeto, temos que trabalhar em nossos pontos de vista. Visualizações são as páginas que serão mostradas aos usuários quando visitarem nosso site ou aplicativo.

Primeiro, vamos abrir o projeto em seu editor de código preferido.

A seguir, altere os diretórios no terminal para mover para o diretório src:

cd src

Em seguida, execute o seguinte comando para criar uma pasta chamada views:

mkdir views

Crie os seguintes arquivos: AllBreweries.vue, BreweryDetail. vue e NotFound.vue dentro do diretório de visualizações que acabamos de criar

Abra os arquivos recém-criados e cole o seguinte código específico para cada arquivo.

Primeiro, nossa AllBreweries. página vue, que é a primeira página que será exibida quando um usuário visitar nosso site:

Em AllBreweries.vue, recuperamos com sucesso os dados da API e, em seguida, iteramos esses dados para exibi-los no modelo.

A seguir, vamos fazer o nosso BreweryDetail.vue página, que contém informações extras sobre uma cervejaria específica quando clicada:

Agora, em nossa página BreweryDetail.vue, não há muito acontecendo aqui além de um HTML básico. Isso porque terminaremos esse componente aos poucos conforme progredimos.

Por último, vamos fazer algumas marcações para nosso componente NotFound.vue:

Nosso NotFound.vue é a página que serviremos aos nossos usuários quando eles visitarem uma rota que não existe. Aprenderemos mais sobre isso em uma seção posterior.

Instalação e configuração do roteador

Agora, estamos na parte divertida de instalar e configurar Vue Router !

Primeiro, mude o diretório de volta para a raiz da pasta do nosso projeto usando este comando:

cd..

Para instalar o Vue Router na pasta raiz do nosso projeto, execute o seguinte:

yarn add vue-router @ 4 #OR npm install vue-router @ 4

Em seguida, mude o diretório de volta para a pasta src:

cd src

Crie uma pasta no diretório src chamada roteador:

mkdir router

Altere o diretório mais uma vez para mover para a pasta do roteador recém-criada:

cd router

Finalmente, crie um arquivo chamado index.js neste diretório:

touch index.js

Este arquivo servirá como nosso arquivo de configuração do roteador.

Dentro do arquivo index.js recém-criado, cole o seguinte código:

//src/router/index.js import {createRouter, createWebHistory} de’vue-router’; import AllBreweries de”@/views/AllBreweries.vue”const routes=[{path:”/”, name:”AllBreweries”, component: AllBreweries,},] const router=createRouter ({history: createWebHistory (), routes} ) export default router

Vamos mergulhar no que nosso código significa aqui.

Em primeiro lugar, precisamos importar as funções createRouter e createWebHistory do Vue Router. Essas funções criam um histórico para o qual um usuário pode voltar e constrói um objeto roteador para Vue, respectivamente.

Observe como criamos nossas rotas em uma matriz, onde cada rota é um objeto com as seguintes propriedades:

Path, o caminho da URL onde esta rota pode ser encontrada Nome, um nome opcional a ser usado quando nos vinculamos a esta rota Componente, qual componente carregar quando esta rota for chamada

Em seguida, criamos o objeto roteador para invoque a função createRouter, passe os valores-chave do histórico e a matriz de rotas como parâmetros e exporte-o.

Em seguida, abra o arquivo main.js na pasta src e adicione o roteador de importação de”./router”após importar App de’./App.vue’e.use (roteador) entre createApp (App) e.mount (‘# app’).

Os trechos de código acima são importados Vue Router e instancie-o na instância global Vue.

Em seguida, abra o arquivo App.vue no diretório src e exclua todo o seu conteúdo, deixando apenas o seguinte:

O roteador O componente-view que adicionamos na linha quatro é um componente funcional que renderiza o componente correspondente para o caminho fornecido.

Rotas de carregamento lento

Vamos retroceder um pouco para aprender um truque de roteamento interessante chamado carregamento lento.

Como nossos aplicativos tendem a ficar complexos à medida que crescem, o tamanho do pacote aumenta, o que diminui o tempo de carregamento. Felizmente, o Vue Router tem o recurso de carregamento lento, que nos permite adiar o carregamento de rotas específicas até que sejam visitadas pelo usuário.

Vamos tentar implementar isso em nosso arquivo de configuração do roteador. Em router/index.js, adicione o seguinte código após o nome:”AllBreweries”,:

component: ()=> import (/* webpackChunkName:”AllBreweries”*/’../views/AllBrewries.vue’)

Depois de fazer isso, o arquivo deve ficar assim:

//router/index.js import {createRouter, createWebHistory} from’vue-router’; const routes=[{path:”/”, name:”AllBreweries”, component: ()=> import (/* webpackChunkName:”AllBreweries”*/’../views/AllBrewries.vue’)}] const router=createRouter ({history: createWebHistory (process.env.BASE_URL), routes}) export default router

Observe que removemos nossa instrução de importação que estava anteriormente no topo e substituímos a propriedade do componente da rota por uma importação dinâmica demonstração. Esta instrução busca o arquivo necessário quando a rota é visitada. Isso é tudo que há para fazer; implementamos a funcionalidade de carregamento lento.

Roteamento dinâmico

Para o aplicativo que estamos construindo, quando um usuário clica em uma cervejaria específica, ele o leva a uma página que contém informações mais detalhadas sobre essa cervejaria. Agora, não podemos criar manualmente uma rota para cada cervejaria listada na API. Como resolvemos isso?

Felizmente, o Vue Router tem um recurso chamado roteamento dinâmico, que nos permite carregar dados dinâmicos por meio de nossas rotas. Vamos ver como podemos tirar vantagem disso.

Primeiro, precisamos modificar nosso arquivo router/index.js para criar a rota para a página BreweryDetail.vue:

//router/index.js… const routes=[{path:”/”, name:”AllBreweries”, component: ()=> import (/* webpackChunkName:”AllBreweries”*/’../views/AllBrewries.vue’) }, {path:”/brewery/: id”, name:”BreweryDetail”, component: ()=> import (/* webpackChunkName:”BreweryDetail”*/’../views/BreweryDetail.vue’)}…

O caminho da rota possui um segmento dinâmico: id denominado “param”. O parâmetro é usado para manipular o estado do componente da rota usando qualquer valor passado por: id, e pode ser acessado usando $ route.params em nosso modelo, tornando a rota dinâmica.

A seguir, vamos trabalhar na lógica por trás do roteamento para nossa página BreweryDetail.vue:

… …

E podemos atualizar a seção de modelo da seguinte maneira:

Aqui, nosso código busca os dados do objeto breweryDetails e os atualiza em nosso modelo.

Se você notou, adicionamos um pequeno botão agradável em que nossos usuários podem clicar para voltar à rota visitada anteriormente. Funciona da mesma forma que clicar no botão Voltar do navegador.

Navegando entre as rotas

Para possibilitar que os usuários naveguem até a página específica de uma cervejaria, modificaremos o código em a seção de modelo de AllBreweries.vue.

Em vez de nossas tags de âncora HTML regulares, Vue Router tem seu próprio componente de link de roteador que podemos passar para prop, que aceita um objeto com um monte de chaves ou pares de valores.

Existem duas maneiras de navegar entre as rotas usando o componente de link do roteador: por meio da propriedade do caminho e das rotas nomeadas.

Propriedade do caminho

Em usando o método da propriedade do caminho, precisamos apenas passar o caminho da URL que queremos que os usuários acessem quando clicarem no link. Em seguida, anexe o ID recuperado da API e defina-o como o valor do parâmetro.

O caminho da URL é sempre igual ao definido no arquivo de configuração do roteador. Seu código deve ser semelhante ao seguinte (observe as linhas 12 e 14):

Rotas nomeadas

Com o método de rotas nomeadas, somos passando a chave name que tem acesso à propriedade name como um valor de cada uma das rotas que criamos.

Também passamos a chave params, que aceita um objeto. Dentro do objeto, temos a chave id, que usamos para definir o valor do parâmetro igual ao ID recuperado da API.

É assim que seu código deve ser (observe as linhas 12, 13, e 15):

Ambos os métodos funcionam, mas em um cenário onde temos que alterar o nome do Caminho de URL que queremos que os usuários visitem, temos que alterá-lo manualmente em cada instância.

Agora, isso não é um grande problema aqui porque é usado em apenas um lugar, mas pense em todo o estresse teríamos que passar se tivéssemos usado esse caminho de URL em mil instâncias.

No entanto, se usarmos o método de rotas nomeadas, só precisaremos alterar o caminho de URL em uma instância: nossa configuração de arquivo do roteador. Parece fácil, certo?

Agora que cobrimos os benefícios do método da rota nomeada, continuaremos com isso neste tutorial.

Tratamento de erros 404

Digamos que um usuário visite uma rota que não criamos anteriormente em nosso arquivo de configuração do roteador. Nosso aplicativo irá carregar, mas sem um componente. Precisamos de uma maneira de dizer ao nosso roteador o que fazer quando esse cenário ocorrer.

Para implementar esse recurso, precisaremos modificar nosso arquivo de configuração do roteador adicionando o seguinte código ao nosso arquivo index.js:

{path:”/:catchAll(.*)”, component: ()=> import (/* webpackChunkName:”NotFound”*/’../views/NotFound.vue’)},…

O Vue Router usa uma expressão regular personalizada para fazer isso.: catchAll é o segmento dinâmico e (. *) é uma expressão regular que o Vue Router usa para avaliar se a rota que está sendo visitada foi definida no arquivo de configuração do nosso roteador. Se não existir, nosso componente NotFound.vue será renderizado na tela.

Transições de rota

Uma maneira interessante de adicionar um toque agradável à experiência do usuário é por meio de transições de rota .

Para adicionar isso ao nosso aplicativo, tudo o que precisamos é envolver as tags do elemento com o atributo v-slot em torno das tags do elemento de transição personalizado do Vue Router.

A seguir, no meio as tags de transição, adicionamos o elemento componente do Vue e associamos seu atributo is ao valor do componente que obtemos do slot Vue.

Também passamos a ele um atributo-chave com o valor de $ route.path (o caminho atual) para garantir que a transição funcione corretamente e que ainda irá destruir e recriar todas as páginas quando a rota mudar.

No elemento de transição, atribuímos ao atributo de nome o valor de fade , que determina o nome das classes CSS que será aplicado ao elemento. O elemento de transição tem um atributo de modo que instrui o Vue Router sobre como lidar com a transição entre as páginas.

A seguir, em nossa seção de estilos, podemos definir as propriedades CSS que serão aplicadas à página quando a rota mudar.

Veja como podemos adicionar isso ao nosso aplicativo:

Conclusão

Usar o Vue Router em nossos aplicativos Vue é muito fácil e direto. Neste artigo, aprendemos como adicionar funcionalidades de roteamento de página e também utilizar alguns dos recursos do Vue Router que tornam simples dar aos nossos usuários uma experiência maravilhosa enquanto navegam em nosso aplicativo.

Para obter mais informações sobre o Vue Roteador, recomendo a leitura da documentação deles .

Você pode encontrar o código-fonte deste tutorial aqui .