📊 Capítulo 09: Vue Router 4 & Navigation Guards

Especialização em Frontend com Vue.js

🗺️ O Fluxo de Resolução do Pipeline do Vue Router 4

flowchart TD
    URL["Usuário clica em link /painel/pedidos"]
    --> GLOBAL_GUARD{"router.beforeEach((to, from) => ...)"}
    GLOBAL_GUARD -- "Não Autenticado" --> REDIRECT["return { name: 'Login' }"]
    GLOBAL_GUARD -- "Autorizado" --> ROUTE_GUARD{"beforeEnter da rota específica"}
    ROUTE_GUARD --> LAZY["Componente baixado via () => import('./Painel.vue')"]
    LAZY --> NESTED["Renderiza <RouterView> aninhado"]

    style URL fill:#ede7f6,stroke:#512da8,stroke-width:2px
    style GLOBAL_GUARD fill:#fff3e0,stroke:#ff9800,stroke-width:2px
    style REDIRECT fill:#ffebee,stroke:#d32f2f,stroke-width:2px
    style ROUTE_GUARD fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
    style LAZY fill:#c8e6c9,stroke:#2e7d32,stroke-width:1.5px
    style NESTED fill:#e8f5e9,stroke:#4caf50,stroke-width:2px

🎯 Slide 1: Rotas Dinâmicas e Props

const routes = [
  {
    path: '/produtos/:id',
    component: () => import('./views/DetalheProduto.vue'),
    props: true, // Passa route.params.id diretamente como prop no componente!
  }
];

🎯 Slide 2: Navigation Guards Modernos

router.beforeEach((to, from) => {
  const auth = useAuthStore();
  if (to.meta.requerAuth && !auth.isAutenticado) {
    return { path: '/login', query: { redirect: to.fullPath } };
  }
});

• Retornar um objeto de rota ou false redireciona/aborta a navegação de forma síncrona ou assíncrona!

🎯 Slide 3: Nested Routes com <RouterView />

• Permite construir layouts corporativos complexos (com sidebar fixa e sub-rotas trocando apenas o miolo da página).