Pular para conteúdo

Aula 09 – Roteamento com Vue Router 🛣️

Em uma Single Page Application (SPA), não mudamos de arquivo HTML ao navegar. Em vez disso, o JavaScript troca o componente que está sendo exibido na tela. O responsável por isso é o Vue Router.

🏗️ Conceito de Rota

Uma rota mapeia uma URL (ex: /contato) para um componente (ex: ContatoView.vue).

graph LR
    URL["/sobre"] --> Router[Vue Router]
    Router --> Comp[SobreView.vue]
    Comp --> Tela[Interface Atualizada]

⚙️ Configuração Básica

Geralmente configuramos as rotas em um arquivo dedicado: src/router/index.js.

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: HomeView },
    { path: '/sobre', component: SobreView }
  ]
})

export default router

🧩 Componentes do Router

O Vue Router nos fornece dois componentes essenciais:

  1. <RouterView />: O "buraco" onde o componente da rota ativa será renderizado.
  2. <RouterLink>: O substituto da tag <a> para navegação interna sem recarregar a página.
<!-- App.vue -->
<template>
  <nav>
    <RouterLink to="/">Home</RouterLink> |
    <RouterLink to="/sobre">Sobre</RouterLink>
  </nav>

  <main>
    <RouterView /> <!-- Componente da rota aparece aqui -->
  </main>
</template>

Às vezes, queremos mudar de página via código (ex: após o login).

import { useRouter } from 'vue-router'

const router = useRouter()

function irParaHome() {
  router.push('/')
}

🛡️ Guards de Rota

Podemos impedir que o usuário acesse certas páginas se não estiver logado.

Segurança

router.beforeEach permite verificar permissões antes de carregar a rota. Lembre-se que segurança real deve ser feita no Backend; no Frontend é apenas para UX.

💻 Mão na Massa

  1. Instale o router: npm install vue-router@4.
  2. Crie duas "Views" simples na pasta src/views.
  3. Configure o roteador e use o <RouterView /> no seu App.vue.

📝 Exercício

  1. Qual a diferença entre usar <a> e <RouterLink> em uma SPA?
  2. Para que serve o componente <RouterView />?
  3. Como passamos parâmetros dinâmicos em uma rota (ex: /perfil/123)?

🚀 Próxima Aula: Vamos conectar nosso app ao mundo real consumindo uma API REST!