Parámetros de ruta dinámicos: [id]
Capture segmentos de URL como parámetros mediante la notación de corchetes en los nombres de carpetas
Parámetros de ruta dinámicos: [id] es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Nombres de carpetas entre corchetes
Utilice corchetes en los nombres de las carpetas para definir segmentos dinámicos.
src/routes/blog/[slug]/+page.svelte -> /blog/:slugAcceder al parámetro
Dentro de la página, utilice el store $page de $app/stores.
import { page } from "$app/stores";
<p>Slug: {$page.params.slug}</p>Acceso desde la función load
Dentro de la función load de +page.js, utilice params.slug directamente.
export function load({ params }) { return { slug: params.slug }; }Varios parámetros
Utilice varios pares de corchetes para rutas con varios segmentos.
src/routes/[lang]/[slug]/+page.svelteValidar parámetros
Devuelva un 404 desde load si el parámetro no es válido.
if (!isValid(params.slug)) error(404, "Not found");Matchers
Añada un matcher en src/params para aplicar una expresión regular a un parámetro.
src/routes/blog/[slug=alpha]/+page.svelteDefinir un matcher
Cree src/params/alpha.js que exporte una función.
export function match(value) { return /^[a-z]+$/.test(value); }SEO con slugs
Los slugs suelen ser identificadores seguros para URL. Genere slugs a partir de los títulos para obtener URL limpias.
Combinar elementos estáticos y dinámicos
Coloque carpetas estáticas junto a las dinámicas; en caso de conflicto, prevalece la estática.
Seguridad de tipos
SvelteKit genera tipos para los parámetros de cada ruta, disponibles en el argumento de la función load.
Prerenderizar rutas dinámicas
Utilice entries en +page.js para enumerar los valores que se prerenderizarán.
Comprobación rápida
¿Cómo se declaran los segmentos dinámicos?
Resumen
Utilice carpetas [param] para los segmentos dinámicos. Acceda a ellos mediante params en load o $page.params.
Preguntas frecuentes
¿La lección «Parámetros de ruta dinámicos: [id]» es gratis?
Sí — el texto completo de «Parámetros de ruta dinámicos: [id]» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Parámetros de ruta dinámicos: [id]»?
Capture segmentos de URL como parámetros mediante la notación de corchetes en los nombres de carpetas Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Parámetros de ruta dinámicos: [id]»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Enrutamiento basado en archivos con +page.svelte
- Parámetros de ruta dinámicos: [id]
- Parámetros opcionales y rest
- Archivos de layout: +layout.svelte