Enrutamiento basado en archivos con +page.svelte
Asigne automáticamente las rutas de archivo bajo src/routes a rutas URL
Enrutamiento basado en archivos con +page.svelte es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 1 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.
Archivo = ruta
SvelteKit asigna las carpetas de src/routes a rutas URL. Un archivo +page.svelte define una ruta.
Página raíz
src/routes/+page.svelte se muestra en /.
Página About
src/routes/about/+page.svelte se muestra en /about.
Rutas anidadas
Las carpetas se anidan. src/routes/blog/posts/+page.svelte se muestra en /blog/posts.
Componente de página
El archivo es un componente Svelte normal. Utilice cualquier función que haya aprendido.
<!-- +page.svelte -->
<h1>About Us</h1>
<p>Welcome to our site.</p>Convención de enrutamiento
Los nombres de archivo que empiezan por + tienen un significado especial en SvelteKit: +page, +layout, +server, etc.
No se necesitan imports
No tiene que registrar las rutas manualmente. El sistema de archivos es el router.
Navegación programática
Utilice goto de $app/navigation para navegar desde el código.
import { goto } from "$app/navigation";
goto("/about");Componente de enlace
Utilice etiquetas <a href> normales; SvelteKit las intercepta para la navegación del lado del cliente.
Precarga
Utilice data-sveltekit-preload-data en un enlace para precargar datos al pasar el ratón.
Página 404
Cree src/routes/+error.svelte para personalizar la página de recurso no encontrado.
Comprobación rápida
¿Dónde crea una ruta /products?
Resumen
El sistema de archivos define las rutas. Un +page.svelte en cualquier carpeta de src/routes se convierte en una ruta.
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 41
- Lecciones
- 163
Preguntas frecuentes
¿La lección «Enrutamiento basado en archivos con +page.svelte» es gratis?
Sí — el texto completo de «Enrutamiento basado en archivos con +page.svelte» 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 «Enrutamiento basado en archivos con +page.svelte»?
Asigne automáticamente las rutas de archivo bajo src/routes a rutas URL 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 1 de 4.
¿Cuánto tiempo toma la lección «Enrutamiento basado en archivos con +page.svelte»?
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