Aula 09 - Roteamento SPA 🗺️

Navegando sem Recarregar

Agenda de Hoje 📅

1. O que é Roteamento Frontend?
2. SPA vs MPA
3. Instalando o svelte-spa-router
4. Mapeando Rotas para Componentes
5. Parâmetros Dinâmicos de URL
6. Prática: App Multi-página

1. Roteamento Frontend 🧭

• Em uma SPA, o navegador não solicita uma nova página HTML ao servidor.
• O JavaScript intercepta a URL e troca o Componente na tela.
• Sensação de velocidade instantânea.

2. SPA vs MPA 🏢🏛️

3. O Ecossistema Svelte 🛠️

• O Svelte não tem um roteador "embutido" no pacote core.
• Soluções comuns: SvelteKit (Fullstack) ou svelte-spa-router (Leve).

4. Instalando o Roteador 📦

npm install svelte-spa-router

5. Configurando as Rotas 🏗️

Criamos um objeto que liga caminhos a componentes:

/* routes.js */
import Home from './Home.svelte';
import Sobre from './Sobre.svelte';
import NotFound from './NotFound.svelte';

export const routes = {
  '/': Home,
  '/sobre': Sobre,
  '*': NotFound // Página 404
};

6. O Componente Router 🖥️

No seu App.svelte, você chama o componente que gerencia as trocas:

<script>
  import Router from 'svelte-spa-router';
  import { routes } from './routes.js';
</script>

<nav> ... </nav>

<main>
  <Router {routes} />
</main>

7. Navegação com use:link 🔗

• Para evitar o recarregamento, usamos a diretiva use:link.

<script>
  import { link } from 'svelte-spa-router';
</script>

<a href="/" use:link>Início</a>
<a href="/sobre" use:link>Sobre</a>

8. Rotas Dinâmicas (Parâmetros) 🆔

• Como passar um ID na URL? (ex: /usuario/123).

/* routes.js */
'/usuario/:id': DetalhesUsuario

8.1 Capturando o Parâmetro

No componente DetalhesUsuario.svelte, o roteador injeta uma prop params:

<script>
  export let params = {};
</script>

<h1>Perfil do Usuário: {params.id}</h1>

9. Navegação via Código ⌨️

• Às vezes queremos mudar de página após uma ação (ex: login).

import { push } from 'svelte-spa-router';

function irParaHome() {
  push('/');
}

10. Prática: Catálogo de Cinema 🎬

• Rota /: Lista de filmes sugeridos.
• Rota /filme/:id: Detalhes de um filme específico.
• Use use:link para navegar entre a lista e o detalhe.

11. Resumo da Aula ✅

• Roteamento SPA troca componentes, não páginas.
• svelte-spa-router é uma solução simples e eficaz.
• :param permite capturar dados variáveis da URL.

Próxima Aula: Svelte Stores 📦

• Estado Global.
• Compartilhando dados sem props.
• O cifrão $ mágico das stores.

Dúvidas? 🤔

"A arquitetura de rotas é o mapa do seu tesouro digital."