Pular para conteúdo
🖥️ Abrir Apresentação Interativa em Tela Cheia

Roteamento com Vue Router 🛣️

Aula 09 - Criando Navegação na SPA

🚦 Por que um Roteador?

  • Em uma SPA, o servidor envia apenas um index.html
  • O navegador não deve recarregar ao mudar de tela
  • O Vue Router intercepta cliques e troca o componente exibido

📦 Instalação e Setup

npm install vue-router@4
- Criamos a pasta src/router/ - Arquivo central de configuração: index.js

🛠️ Configurando Rotas Básicas

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/sobre', component: () => import('../views/About.vue') }
]

🚀 Web History vs Hash Mode

  • History Mode: URLs limpas (/contato)
  • Hash Mode: Usa tralha (/#/contato)
  • Dica: No modo History, o servidor precisa de configuração extra no deploy!
  • Substitui a tag <a> 
    <router-link to="/">Home</router-link>
<router-link :to="{ name: 'Sobre' }">Sobre</router-link>

🖼️ Onde as páginas aparecem?

  • Tag especial <router-view />
  • Funciona como um "espaço reservado"
  • O Router injeta o componente da rota ativa aqui

🧩 Visualizando a Injeção

graph TD
    App[App.vue] --> Nav[Navbar]
    App --> View[router-view]
    View -- Rota / --> Home[Home.vue]
    View -- Rota /sobre --> About[About.vue]

🆔 Rotas Dinâmicas (Parâmetros)

  • Capturar IDs pela URL: 
    { path: '/produto/:id', component: Produto }
  • No componente: 
    const route = useRoute()
const id = route.params.id

🏎️ Programmatic Navigation

  • Navegar via JavaScript (ex: após login): 
    const router = useRouter()
router.push('/dashboard')

🏗️ Nested Routes (Rotas Filhas)

  • Rota dentro de outra rota
  • Ex: /usuario/perfil e /usuario/config
  • O componente pai também deve ter um <router-view />
  • Proteger rotas (ex: apenas Logados)
  • router.beforeEach()
  • Verifica se o usuário tem permissão antes de entrar na rota

🐢 Lazy Loading de Rotas

  • Não carregue tudo de uma vez!
  • Importação dinâmica: component: () => import(...)
  • Diminui o tamanho inicial (Bundle) da aplicação

🏗️ Desafio da Aula

  • Configurar o roteador no projeto Vite
  • Criar 3 Views: Home, Produtos, Contato
  • Implementar uma barra de navegação global
  • Usar rotas dinâmicas para exibir detalhes de um produto

🏁 Resumo

  • Vue Router gerencia a "ilusão" de várias páginas
  • router-link para ir, router-view para mostrar
  • Use Parâmetros para páginas de detalhes

🏁 Dúvidas?

Bom percurso a todos! Próxima aula: Consumo de API REST.