🚀 Capítulo 14: Vue Router - Hiperdrive

🎯 Objetivo da Aula

Ao final desta aula, você saberá como criar uma aplicação com múltiplas páginas (rotas) no Vue.js usando a biblioteca Vue Router, permitindo que o usuário navegue entre telas instantaneamente.

---

🏢 O Cenário Prático (Seu Desafio)

O painel da sua nave está ficando muito cheio! Você precisa dividir as informações: uma página para o Painel de Controle e outra para o Quartel General. Seu desafio é criar o sistema de Hiperdrive (Navegação) para alternar entre essas telas sem recarregar a página!

---

🧠 Fundamentos: A Teoria Traduzida

Para criar páginas no Vue, usamos o Vue Router. Ele nos dá dois componentes principais para colocar no HTML:

1. <RouterView />: É o buraco onde a página atual vai aparecer.
2. <RouterLink>: É o botão de navegação. Substitui a tag <a>.
   • Exemplo: <RouterLink to="/qg">Ir para o QG</RouterLink>

---

📖 Exemplo Guiado: Configurando as Rotas

Geralmente instalamos o Vue Router com npm install vue-router@4. Vamos ver como fica a estrutura básica no App.vue.

🛠️ Passo a Passo

Abra o arquivo src/App.vue e configure a casca da navegação:

<template>
  <div>
    <h1>🚀 Sistema de Hiperdrive</h1>
    
    <!-- Menu de Navegação -->
    <nav>
      <!-- O RouterLink muda a URL sem recarregar a página -->
      <RouterLink to="/">Painel</RouterLink> | 
      <RouterLink to="/qg">Quartel General</RouterLink>
    </nav>
 
    <hr />
 
    <!-- Aqui é onde os componentes das páginas vão aparecer -->
    <RouterView />
  </div>
</template>
 
<script setup>
// Em um projeto real, a configuração das rotas fica no arquivo router/index.js
</script>
 
<style scoped>
nav a {
  color: #ffe81f;
  margin: 0 10px;
  text-decoration: none;
}
.router-link-active {
  font-weight: bold;
  text-decoration: underline;
}
</style>

🕹️ Como Executar e Testar no VS Code

1. Salve e veja o navegador.
2. Clique nos links. Veja que a URL muda na barra de endereço e o Vue destaca o link ativo automaticamente graças à classe .router-link-active!

---

🛠️ Prática Obrigatória 1

Crie um novo componente de página simples chamado Hangar.vue (pode ser apenas um título).

---

🛠️ Prática Obrigatória 2

Adicione um novo <RouterLink> no menu do App.vue apontando para a rota /hangar.

---

🔑 Gabarito de Código/Fórmulas

Prática 2:

No <template> do App.vue:

<RouterLink to="/hangar">Hangar</RouterLink>

---

← Capitulo Anterior | Proximo Capitulo →