Parâmetros de rota dinâmicos: [id]
Capture segmentos da URL como parâmetros usando a notação de colchetes nos nomes das pastas.
Parâmetros de rota dinâmicos: [id] é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Nomes de pasta entre colchetes
Utilize colchetes nos nomes de pasta para segmentos dinâmicos.
src/routes/blog/[slug]/+page.svelte -> /blog/:slugAcesso ao parâmetro
Dentro da página, utilize o armazenamento $page de $app/stores.
import { page } from "$app/stores";
<p>Slug: {$page.params.slug}</p>Acesso pela função de carregamento
No carregamento de +page.js, utilize params.slug diretamente.
export function load({ params }) { return { slug: params.slug }; }Vários parâmetros
Utilize vários pares de colchetes para caminhos com vários segmentos.
src/routes/[lang]/[slug]/+page.svelteValidação de parâmetros
Retorne um erro 404 do carregamento se o parâmetro for inválido.
if (!isValid(params.slug)) error(404, "Not found");Correspondentes
Adicione um correspondente em src/params para exigir uma expressão regular em um parâmetro.
src/routes/blog/[slug=alpha]/+page.svelteDefinição de um correspondente
Crie src/params/alpha.js exportando uma função.
export function match(value) { return /^[a-z]+$/.test(value); }SEO com identificadores
Os identificadores geralmente são IDs seguros para URL. Gere identificadores a partir dos títulos para criar URLs limpas.
Combinação de estático e dinâmico
Mantenha pastas estáticas ao lado das dinâmicas; em caso de conflito, a estática prevalece.
Segurança de tipos
O SvelteKit gera tipos para os parâmetros de cada rota, acessíveis no argumento da função de carregamento.
Pré-renderização de rotas dinâmicas
Utilize entries em +page.js para enumerar os valores a serem pré-renderizados.
Verificação rápida
Como os segmentos dinâmicos são declarados?
Recapitulação
Utilize pastas [param] para segmentos dinâmicos. Acesse-os por meio de params no carregamento ou de $page.params.
Perguntas Frequentes
A aula “Parâmetros de rota dinâmicos: [id]” é grátis?
Sim — o texto completo de “Parâmetros de rota dinâmicos: [id]” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “Parâmetros de rota dinâmicos: [id]”?
Capture segmentos da URL como parâmetros usando a notação de colchetes nos nomes das pastas. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Parâmetros de rota dinâmicos: [id]”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Roteamento baseado em arquivos com +page.svelte
- Parâmetros de rota dinâmicos: [id]
- Parâmetros opcionais e de resto
- Arquivos de layout: +layout.svelte