O Vue Router é a biblioteca oficial de roteamento para o ecossistema Vue.js, permitindo a criação de Single Page Applications (SPAs) onde a interface é atualizada dinamicamente com base na URL, sem a necessidade de recarregar a página.

1. Instalação do Pacote

Para adicionar o roteador ao seu projeto Vue, utilize o gerenciador de pacotes NPM:

npm install vue-router --save

2. Configuração Inicial

O mapeamento básico consiste em associar caminhos (paths) a componentes específicos:

const routes = [
   {
     path: "/autenticacao",
     component: LoginView
   },
   {
     path: "/dashboard",
     component: MainDashboard
   }
];

3. Redirecionamento Global

Para tratar rotas inexistentes ou definir uma página inicial padrão, utilizamos a propriedade redirect com o seletor de asterisco:

{
 path: "*",
 redirect: "/autenticacao"
}

4. Componentes de Interface

O Vue Router fornece dois componentes essenciais:

• <router-view>: Onde o componente da rota ativa será renderizado.
• <router-link>: Utilizado para criar links de navegação acessíveis.

5. Customização de Links Ativos

É possível estilizar automaticamente o link que corresponde à rota atual através da classe padrão ou definindo uma classe personalizada:

/* CSS Global */
.router-link-active {
 font-weight: bold;
 color: #42b983;
}

No template, podemos usar o atributo active-class:

<nav class="menu-principal">
 <router-link to="/home" active-class="item-selecionado">Início</router-link>
 <router-link to="/perfil" active-class="item-selecionado">Perfil</router-link>
</nav>

6. Navegação Programática

Além do clique em links, podemos navegar via código JavaScript utilizando a instância $router:

// Adiciona uma nova entrada no histórico
this.$router.push('/configuracoes');

// Substitui a entrada atual no histórico
this.$router.replace('/erro');

// Navega no histórico (voltar uma página)
this.$router.go(-1);

7. Roteamento Aninhado (Sub-rotas)

Para interfaces complexas com painéis internos, utilizamos a propriedade children:

{
   path: "/admin",
   component: AdminPanel,
   children: [
     {
       path: "usuarios",
       component: UserList
     },
     {
       path: "relatorios",
       component: Reports
     },
     {
       path: "",
       redirect: "usuarios" // Redirecionamento interno
     }
   ]
}

8. Manipulação de Parâmetros (Query vs Params)

Existem duas formas principais de enviar dados via URL:

Query String: /detalhes?uuid=123&tipo=premium

// Acesso ao dado
console.log(this.$route.query.uuid); // "123"

Parâmetros Dinâmicos: Definidos na configuração da rota.

{
 path: "/produto/:slug/:id",
 component: ProductDetail
}

Acessando o parâmetro dinâmico: this.$route.params.id.

9. Rotas Nomeadas

Atribuir um nome à rota facilita a manutenção, evitando que links quebrem se o path mudar:

{
 path: "/usuario/configuracoes/seguranca",
 component: SecuritySettings,
 name: "settings_security"
}

<router-link :to="{ name: 'settings_security' }">Segurança</router-link>

10. Múltiplas Visões (Named Views)

Útil para exibir diferentes componentes em áreas distintas da mesma página simultaneamente:

<!-- App.vue -->
<router-view name="sidebar"></router-view>
<router-view></router-view>

{
 path: "/dashboard",
 components: {
   default: MainContent,
   sidebar: SideNavigation
 }
}

11. Modos de Histórico

Existem dois modos principais de operação:

• Hash (padrão): Usa # na URL (ex: site.com/#/home). Não exige configuração no servidor.
• History: URLs limpas (ex: site.com/home). Requer configuração no servidor (Nginx/Apache) para redirecionar todas as requisições ao index.html.

const router = new VueRouter({
 mode: 'history',
 routes: myRoutes
});

12. Proteção de Rotas (Navigation Guards)

O Vue Router oferece ganchos para controlar o fluxo de navegação, essenciais para autenticação:

// Global: executado antes de cada navegação
router.beforeEach((to, from, next) => {
 const isAuth = localStorage.getItem('token');
 if (to.path !== '/login' && !isAuth) {
   next('/login');
 } else {
   next();
 }
});

// Outros guards: beforeEnter (na rota), beforeRouteLeave (no componente)

13. Metadados de Rota (Meta Fields)

Armazene informações arbitrárias nas rotas, como títulos de página ou níveis de permissão:

{
 path: "/financeiro",
 component: Finance,
 meta: { requiresAdmin: true, title: "Área Contábil" }
}

14. Carregamento Preguiçoso (Lazy Loading)

Otimize a performence dividindo o código em pacotes menores que são carregados apenas quando a rota é acessada:

const UserProfile = () => import("../views/UserProfile.vue");

// Com Promise explícita (padrão antigo)
const Statistics = () => Promise.resolve(import("../views/Statistics.vue"));

15. Controle de Comportamento do Scroll

Permite definir a posição do scroll ao navegar entre páginas, mantendo a posição original ao usar botões de avançar/voltar:

const router = new VueRouter({
 routes,
 scrollBehavior(to, from, savedPosition) {
   if (savedPosition) {
     return savedPosition;
   } else {
     return { x: 0, y: 0 };
   }
 }
});