🧩 Exercícios Práticos: Roteamento SPA com Vue Router 4

Spec Frontend Com Vue • Trilha Progressiva em 4 Níveis

🎯 Nível 1: Fundamentos

Problema 09.1 — Configuração de Router com createRouter e createWebHistory

Contexto: Configuração de Router com createRouter e createWebHistory no contexto de Roteamento SPA com Vue Router 4.

Requisitos de Execução:

  1. Criar rotas para /, /produtos e /sobre e exportar instância do Vue Router.

Resultado Esperado

Vue Router 4 configurado com histórico HTML5.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_09_1_SeuNome
  2. Envie na tarefa: Atividade Cap 09 - Roteamento SPA com Vue Router 4
🔑 Gabarito de Código & Solução Comentada 
// router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
import HomeView from '@/views/HomeView.vue';
import ProdutosView from '@/views/ProdutosView.vue';

export const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: HomeView },
    { path: '/produtos', component: ProdutosView },
  ],
});

🔍 Nível 2: Prática

Problema 09.2 — Parâmetros Dinâmicos e Extração com useRoute()

Contexto: Parâmetros Dinâmicos e Extração com useRoute() no contexto de Roteamento SPA com Vue Router 4.

Requisitos de Execução:

  1. Criar rota /produtos/:id e extrair ID no <script setup> com const route = useRoute().

Resultado Esperado

ID de rota dinâmico extraído e consumido na busca do produto.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_09_2_SeuNome
  2. Envie na tarefa: Atividade Cap 09 - Roteamento SPA com Vue Router 4
🔑 Gabarito de Código & Solução Comentada 
<!-- DetalheProdutoView.vue -->
<script setup lang="ts">
import { useRoute } from 'vue-router';
const route = useRoute();
const produtoId = route.params.id;
</script>

<template>
  <div>Visualizando Produto #{{ produtoId }}</div>
</template>

⚡ Nível 3: Integração

Problema 09.3 — Navigation Guards Globais (router.beforeEach) para Autenticação

Contexto: Navigation Guards Globais (router.beforeEach) para Autenticação no contexto de Roteamento SPA com Vue Router 4.

Requisitos de Execução:

  1. Proteger rotas com meta: { requiresAuth: true } redirecionando para /login se não autenticado.

Resultado Esperado

Acesso à rota protegida bloqueado com redirecionamento para tela de login.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_09_3_SeuNome
  2. Envie na tarefa: Atividade Cap 09 - Roteamento SPA com Vue Router 4
🔑 Gabarito de Código & Solução Comentada 
// router/guards.ts
import { router } from './index';

router.beforeEach((to, from, next) => {
  const estaAutenticado = Boolean(localStorage.getItem('token'));
  if (to.meta.requiresAuth && !estaAutenticado) {
    next({ path: '/login', query: { redirect: to.fullPath } });
  } else {
    next();
  }
});

🏆 Nível 4: Desafio Corporativo

Problema 09.4 — Lazy Loading de Rotas e Transições Visuais entre Páginas

Contexto: Lazy Loading de Rotas e Transições Visuais entre Páginas no contexto de Roteamento SPA com Vue Router 4.

Requisitos de Execução:

  1. Configurar carregamento dinâmico com () => import('@/views/Dashboard.vue') e animação com <router-view v-slot='{ Component }'>.

Resultado Esperado

Code-splitting configurado com transição de fade suave entre páginas.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_09_4_SeuNome
  2. Envie na tarefa: Atividade Cap 09 - Roteamento SPA com Vue Router 4
🔑 Gabarito de Código & Solução Comentada 
<!-- App.vue (Transições) -->
<template>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</template>