Vue Router - Conceitos

O Vue Router é uma parte fundamental do ecossistema Vue.js que permite a criação de aplicativos de página única (SPA - Single Page Applications). Ele desempenha um papel crucial na criação de rotas, navegação e gerenciamento de estados dentro de sua aplicação Vue.js.

Conceitos Básicos do Vue Router

Roteamento: O Vue Router fornece a capacidade de criar rotas em seu aplicativo Vue.js. Isso significa que você pode criar URLs que correspondem a diferentes partes do seu aplicativo, permitindo uma navegação fluida e sem a necessidade de recarregar a página inteira.
Componentes de Rota: Cada rota no Vue Router corresponde a um componente Vue específico. Isso significa que, à medida que os usuários navegam entre as diferentes rotas, os componentes associados a essas rotas são montados e exibidos na área de visualização do aplicativo.
Navegação Programática: Além da navegação por meio de links e cliques, o Vue Router oferece recursos para a navegação programática, permitindo que você navegue de forma dinâmica com base em eventos, ações do usuário ou condições de negócios.
Histórico de Navegação: O Vue Router gerencia o histórico de navegação do aplicativo, permitindo que os usuários naveguem para trás e para frente entre as páginas. Isso é feito sem recarregar a página e é crucial para criar uma experiência de usuário suave.

Funcionamento do Vue Router

O Vue Router funciona através da criação de um roteador Vue que é adicionado à instância principal do aplicativo. O roteador é configurado para mapear URLs específicos para componentes Vue. Isso é feito por meio da definição de rotas. Cada rota é definida com um caminho (URL) e um componente associado. Quando o usuário navega para uma rota específica, o componente associado é montado e exibido.

Instalação do Vue Router

Para começar a usar o Vue Router, você precisa instalá-lo em seu projeto Vue.js. Você pode fazer isso usando o npm ou o yarn, como preferir. Aqui está um exemplo de instalação usando npm:

npm install vue-router

Uma vez instalado, você pode importar o Vue Router em seu aplicativo e configurá-lo.

Características Principais do Vue Router

Roteamento Aninhado: O Vue Router suporta rotas aninhadas, o que significa que você pode criar hierarquias de rotas. Isso é útil para organizar aplicativos complexos em módulos e páginas menores.
Parâmetros de Rota: Você pode definir parâmetros dinâmicos nas rotas para capturar valores específicos de URL e usá-los em seus componentes.
Navegação por Nome: O Vue Router permite a navegação por nome de rota, o que é útil ao lidar com rotas nomeadas, tornando o código mais legível e manutenível.
Guardas de Rota: Você pode definir guardas de rota para controlar o acesso às rotas, realizar ações antes de entrar ou sair de uma rota, autenticar usuários e muito mais.
Múltiplos Modos de Histórico: O Vue Router suporta diferentes modos de histórico, incluindo o histórico baseado em hash e o histórico HTML5, permitindo que você escolha o método que melhor se adapte ao seu aplicativo.
Roteamento Lazy-Loading: Você pode carregar componentes de rota sob demanda, o que ajuda a otimizar o desempenho do seu aplicativo, carregando apenas o código necessário para a rota atual.
Navegação por Programação: O Vue Router oferece métodos programáticos para navegação, permitindo que você acesse e manipule o roteador de qualquer lugar em seus componentes.

O Vue Router é uma ferramenta poderosa para criar aplicativos Vue.js com navegação dinâmica e responsiva.

Guia de passo a passo para configurar o Vue Router na versão 4 do Vue.js:

Passo 1: Crie um Projeto Vue.js

Se você ainda não tiver um projeto Vue.js, crie um projeto usando o Vue CLI ou sua configuração preferida. Certifique-se de que está usando a versão 4 do Vue.

vue create seu-projeto

Siga as instruções para configurar seu projeto com as opções desejadas.

Passo 2: Instale o Vue Router

Após criar seu projeto, navegue até a pasta raiz do projeto e instale o Vue Router usando o npm ou o yarn:

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

Passo 3: Configure o Vue Router

Agora, você precisa configurar o Vue Router para o seu projeto na versão 4. Para fazer isso, siga estas etapas:

3.1. Abra o arquivo src/main.js, que é o ponto de entrada do seu aplicativo Vue.js.

3.2. Importe o Vue Router e configure-o:

import { createApp } from 'vue'; // Importe a função createApp do Vue 3
import { createRouter, createWebHistory } from 'vue-router'; // Importe as funções do Vue Router

import App from './App.vue'; // Importe seu componente raiz

const routes = [
  // Defina suas rotas aqui
]

const router = createRouter({
  history: createWebHistory(), // Use createWebHistory para modo de histórico
  routes
});

const app = createApp(App);

app.use(router); // Use o Vue Router

app.mount('#app');

Passo 4: Defina suas Rotas

Agora, é hora de definir as rotas do seu aplicativo Vue 4. No exemplo acima, no array routes, você deve definir suas rotas. Cada rota é definida com um caminho (URL) e um componente associado. Quando o usuário navega para uma rota específica, o componente associado é montado e exibido.

Por exemplo, para criar uma rota para a página inicial e outra para uma página de contato, você pode definir as rotas assim:

const routes = [
  { path: '/', component: Home }, // Importe o componente Home
  { path: '/contact', component: Contact } // Importe o componente Contact
]

Passo 5: Crie Componentes

Certifique-se de que os componentes Vue associados às rotas, como Home e Contact, estejam criados e importados corretamente.

Passo 6: Adicione Roteamento às suas Vistas

Agora você pode usar o Vue Router nas suas vistas. Por exemplo, você pode adicionar links para suas rotas nos componentes do Vue:

<router-link to="/">Página Inicial</router-link>
<router-link to="/contact">Contato</router-link>

E em suas vistas, adicione o componente <router-view> onde o conteúdo da rota será renderizado:

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

Passo 7: Teste o Aplicativo

Agora você pode iniciar seu aplicativo e testar a navegação entre as rotas:

npm run serve

Seu aplicativo Vue.js na versão 4 agora deve estar configurado com o Vue Router, permitindo navegação entre as rotas definidas. Certifique-se de importar e criar os componentes associados às rotas de acordo com as necessidades do seu projeto.

Objeto $router

O objeto $router fornecido pelo Vue Router possui diversos métodos e propriedades úteis para navegar e interagir com o roteamento em um aplicativo Vue.js. Além do método $router.push, que discutimos anteriormente, aqui estão alguns dos métodos mais utilizados:

$router.go(n): Este método permite navegar para uma rota anterior ou posterior no histórico de navegação. Você pode passar um número positivo (para avançar) ou negativo (para voltar) como argumento. Por exemplo, $router.go(-1) navegará para a rota anterior.
$router.replace(location): O método replace é semelhante ao push, mas ele substitui a entrada atual no histórico de navegação em vez de adicionar uma nova entrada. Isso pode ser útil quando você deseja atualizar a rota atual sem criar uma nova entrada no histórico.
$router.back() e $router.forward(): Esses métodos são atalhos para $router.go(-1) e $router.go(1), respectivamente, que permitem voltar uma página no histórico de navegação e avançar uma página.
$router.currentRoute: Esta propriedade contém informações sobre a rota atual, como o caminho, os parâmetros, a consulta e outras informações relacionadas à rota.
$router.addRoute(route): Este método permite adicionar dinamicamente novas rotas ao Vue Router durante a execução do aplicativo. Isso pode ser útil para casos em que você deseja adicionar rotas dinamicamente com base em alguma lógica.
$router.removeRoute(name): Este método permite remover dinamicamente rotas do Vue Router durante a execução do aplicativo. Da mesma forma que addRoute, isso é útil quando você precisa remover rotas com base em alguma lógica.
$router.beforeEach(): Esta é uma função de navegação global usada para definir guardas de navegação. Você pode usar isso para executar lógica antes de cada navegação, como verificar a autenticação do usuário ou outros critérios de autorização.
$router.afterEach(): Esta é outra função de navegação global que é chamada após a conclusão de cada navegação. Pode ser usado para executar ações pós-navegação, como rastreamento de análise ou lógica de registro.

Lembre-se de que a lista acima não é exaustiva, e o Vue Router oferece mais métodos e funcionalidades para manipular o roteamento em um aplicativo Vue.js. A escolha de quais métodos usar dependerá das necessidades específicas do seu projeto. Você pode consultar a documentação oficial do Vue Router para obter informações detalhadas sobre todos os métodos e funcionalidades disponíveis.

Rotas Alinhadas ou Rotas Filhas

O Vue Router 4 oferece uma funcionalidade poderosa e flexível chamada "Rotas Alinhadas" (ou "Rotas Filhas"). Esse conceito é fundamental para criar aplicativos Vue.js mais complexos, organizando as rotas de maneira hierárquica e estruturada. Vamos explorar o que são as Rotas Alinhadas e como elas podem ser usadas em seu aplicativo.

O Que São Rotas Alinhadas?

Em termos simples, as Rotas Alinhadas são rotas aninhadas dentro de outras rotas. Elas permitem criar uma hierarquia de navegação, onde uma rota principal (ou pai) pode conter uma ou mais rotas secundárias (ou filhas). Isso é especialmente útil quando você deseja dividir seu aplicativo em módulos ou páginas que têm sua própria lógica e visualização.

Vantagens das Rotas Alinhadas:

Organização Lógica: As rotas alinhadas ajudam a organizar o código de forma lógica. Por exemplo, em um aplicativo de compras online, você pode ter uma rota principal chamada "Loja" e rotas filhas para "Produtos," "Carrinho de Compras" e "Finalização de Compra." Cada seção do aplicativo tem sua própria rota, tornando o código mais gerenciável.
Roteamento Modular: As rotas alinhadas permitem a criação de módulos de roteamento independentes. Isso facilita a manutenção e a adição de novas funcionalidades sem afetar outras partes do aplicativo.
Transições Suaves: Com rotas alinhadas, é possível criar transições de página mais suaves e transições de layout personalizadas. Por exemplo, você pode animar a transição entre as páginas de "Produtos" e "Carrinho de Compras" de maneira agradável.

Como Definir Rotas Alinhadas:

A definição de rotas alinhadas no Vue Router é bastante simples. Você começa definindo uma rota pai no nível superior e, em seguida, dentro dela, você declara as rotas filhas. Veja um exemplo prático:

const routes = [
  {
    path: '/loja',
    component: Loja,
    children: [
      {
        path: 'produtos',
        component: Produtos,
      },
      {
        path: 'carrinho',
        component: Carrinho,
      },
      {
        path: 'finalizacao',
        component: FinalizacaoCompra,
      },
    ],
  },
];

No exemplo acima, temos uma rota pai chamada "Loja" com três rotas filhas: "Produtos," "Carrinho" e "Finalização de Compra." Cada rota filha tem seu próprio componente associado.

Navegando entre Rotas Alinhadas:

Para navegar entre as rotas alinhadas, você pode usar a diretiva <router-link> ou o método $router.push. Por exemplo:

<router-link to="/loja/produtos">Produtos</router-link>

O código acima cria um link para a rota filha "Produtos." Quando o usuário clica no link, o Vue Router cuida da navegação para a rota correspondente.

Conclusão:

As Rotas Alinhadas são uma ferramenta valiosa no Vue Router 4 para criar aplicativos web complexos e bem estruturados. Elas oferecem organização lógica, modularidade e a capacidade de criar transições suaves entre as diferentes partes do seu aplicativo. Ao dominar esse conceito, você estará mais preparado para criar aplicativos Vue.js mais sofisticados e de fácil manutenção.

Referências:

https://www.vuemastery.com/blog/vue-router-a-tutorial-for-vue-3/

https://medium.com/@matifzia/advanced-routing-concepts-and-techniques-with-vue-router-34ca1791cd9e

Erro de Permissão no VSCode:

Set-ExecutionPolicy RemoteSigned