Pular para conteúdo

Projeto 09 - Roteamento com Vue Router 🛣️

🎯 Objetivo

Transformar sua aplicação em uma SPA (Single Page Application) com múltiplas visualizações e navegação entre elas.

🛠️ Requisitos

  • Instalação e configuração do vue-router.
  • Uso de router-link e router-view.

🏗️ Tarefas

  1. Setup: Instale o Vue Router e crie o arquivo src/router/index.js.
  2. Vistas: Crie as pastas src/views e adicione os componentes Home.vue e Sobre.vue.
  3. Navegação: No App.vue, remova o conteúdo central e coloque a tag <router-view />. Crie links de navegação usando <router-link>.
  4. Parâmetros: Crie uma rota /usuario/:id que exiba o ID passado na URL dentro da página.

🧪 Verificação

Clique nos links do menu. A URL deve mudar e o conteúdo no centro da página deve alternar sem que o navegador realize um refresh completo.