Exercícios: Aula 09 - Roteamento com Vue Router 🛣️

1. SPA vs Roteamento Tradicional

Em uma Single Page Application, o que realmente acontece quando o usuário "muda de página"? Explique o papel do Vue Router nesse processo.

2. Configurando Rotas

Crie um arquivo router/index.js (esquemático) que defina duas rotas: - A rota / que renderiza o componente HomeView.vue. - A rota /sobre que renderiza o componente AboutView.vue. Utilize o createRouter e o createWebHistory.

3. Navegação vs Links

Qual a diferença entre usar <a href="/sobre"> e <router-link to="/sobre"> em uma aplicação Vue? O que acontece com o estado da aplicação no primeiro caso?

4. Parâmetros Dinâmicos

Crie uma rota que receba um ID de produto dinamicamente: /produto/:id. Dentro do componente de destino, como você faria para capturar esse ID e exibi-lo na tela usando a Composition API?

5. Desafio: Barra de Navegação

Crie um componente NavBar.vue que contenha links para "Home", "Produtos" e "Contato". Use classes CSS para destacar o link da página que está ativa no momento (pesquise a classe automática router-link-active).