Implemente el sistema de enrutamiento para su aplicación con la ayuda de esta guía.
SvelteKit es un marco para crear aplicaciones web de todos los tamaños, con gran experiencia de desarrollo y enrutamiento flexible basado en archivos. El marco combina el SEO de las aplicaciones de una sola página y los beneficios de mejora progresiva con la navegación rápida de las aplicaciones renderizadas del lado del servidor. Una de las características críticas de SvelteKit es su sistema de enrutamiento.
Comprender el enrutamiento de SvelteKit
SvelteKit es un marco construido sobre Svelte. En SvelteKit, el enrutamiento sigue un sistema basado en archivos. Esto significa que la estructura de directorios de sus páginas determina las rutas de su aplicación.
Para comprender mejor el sistema de enrutamiento SvelteKit, primero, cree un proyecto SvelteKit. Para hacer esto, ejecute el siguiente código en su terminal:
npm create svelte@latest my-app
Después de ejecutar el bloque de código anterior, responderá una serie de indicaciones para configurar su aplicación.
A continuación, instale las dependencias necesarias para su proyecto. Para hacer esto cd en su proyecto y ejecutar:
npm install
Abra el proyecto en el servidor de desarrollo ejecutando el siguiente comando en su terminal:
npm run dev
Ahora, su proyecto estará listo y funcionando en http://localhost: 5173/. Cuando abra la aplicación en su servidor de desarrollo, tendrá una interfaz similar a la imagen a continuación.
La ruta raíz del proyecto ‘/’ corresponde a un archivo llamado +pagina.esbelta. Puedes encontrar el +pagina.esbelta archivo siguiendo la ruta del archivo; origen/rutas en tu proyecto
Para crear diferentes rutas en SvelteKit, puede crear carpetas en su origen/rutas directorio. Cada carpeta corresponderá a una ruta diferente. Generar un +pagina.esbelta archivo en cada carpeta para definir el contenido de esa ruta.
<main>
<h2> This is the about page h2>
main>
El código anterior vivirá dentro del +página archivo. Creará un archivo esbelto dentro del acerca de carpeta en el origen/rutas directorio. Este archivo contendrá el contenido de la ruta. Para ver la ruta en su navegador web, vaya a http://localhost: 5173/sobre.
Navegando a la /about route mostrará esta interfaz en su pantalla:
Descripción de las rutas anidadas
Las rutas anidadas son una forma de estructurar el sistema de enrutamiento en una aplicación web. En una estructura de ruta anidada, las rutas se colocan dentro de otras rutas, creando una relación jerárquica entre ellas. Puede crear rutas anidadas en SvelteKit colocando carpetas con el +pagina.esbelta archivo dentro de otras carpetas de ruta bajo el origen/rutas directorio.
Por ejemplo:
En este ejemplo, anida el correo ruta dentro de la Blog ruta. Para anidar el correo ruta dentro de la Blog ruta, crea el correo carpeta y su +pagina.esbelta archivo dentro del Blog carpeta de ruta.
Para acceder a la ruta del blog en su aplicación, abra su navegador web y navegue hasta http://localhost: 5173/blog.
La ruta de correos estará disponible en http://localhost: 5173/blog/publicación.
Diseños y rutas de error
SvelteKit define un diseño de la aplicación de forma similar a Next.js. Ambos marcos utilizan un disposición componente para definir la estructura de la aplicación.
SvelteKit utiliza el +layout.esbelto para definir un diseño para un grupo de páginas. Puedes crear un +layout.esbelto archivo en el origen/rutas directorio para definir un diseño para todas las páginas de su aplicación o en un subdirectorio para definir un diseño para un grupo específico de páginas.
Aquí hay un ejemplo de cómo definir una ruta de diseño para toda su aplicación:
El ejemplo anterior proporciona una ruta de diseño. El archivo contiene un h1 elemento que muestra el texto "Esta es una aplicación SvelteKit". También incluye un ranura elemento. El ranura El elemento es un elemento especial que define la ubicación donde la aplicación representará el contenido de sus rutas dentro del diseño. Funciona de la misma manera que los componentes de Vue..
En este caso, su aplicación mostrará el contenido de sus rutas debajo del h1 elemento.
Para definir una página de error, cree un archivo llamado +error.esbelto en el origen/rutas directorio. Esta página se mostrará cuando ocurra un error durante el renderizado.
Por ejemplo:
Cuando encuentre un error, como navegar a una ruta inexistente, su aplicación volverá a esta error ruta en su lugar.
Por ejemplo:
La ruta http://localhost: 5173/ir no existe, por lo que la aplicación representa el error ruta en su lugar.
Navegando entre páginas
Encontrar la mejor manera de navegar entre las rutas que creas es crucial para una buena experiencia. Tradicionalmente, el enrutamiento basado en archivos en la mayoría de las tecnologías utiliza enlaces para navegar entre diferentes páginas. Para navegar entre páginas en SvelteKit, puede usar una etiqueta de anclaje HTML simple.
Por ejemplo, puede escribir este código en cualquier ruta que desee, pero debe escribirlo en el disposición ruta por encima de la ranura etiqueta:
<ul>
<li>
<ahref="/">Homea>
li>
<li>
<ahref="/about">Abouta>
li>
<li>
<ahref="/blog">Bloga>
li>
<li>
<ahref="/blog/post">Posta>
li>
ul>
Al hacer clic en cualquier etiqueta de anclaje, lo llevará a la ruta correspondiente.
Enrutamiento dinámico en SvelteKit
El enrutamiento dinámico le permite crear progresivamente rutas que la aplicación genera en función de datos o parámetros. Le permite crear aplicaciones web flexibles y dinámicas que manejan diferentes rutas y muestran contenido de acuerdo con datos o parámetros específicos.
Para crear una ruta dinámica en SvelteKit, cree una carpeta llamada [babosa] y luego un +pagina.esbelta archivo en la carpeta para definir el contenido de la ruta. Tenga en cuenta que puede nombrar la carpeta como desee, pero asegúrese de incluir siempre el nombre entre corchetes [].
Aquí hay un ejemplo de una ruta dinámica:
Para acceder a esta ruta en su navegador web, navegue a este enlace http://localhost: 5173/[babosa], dónde [babosa] puede ser cualquier nombre de ruta único e indefinido que elija.
Puede acceder a su aplicación [babosa] parámetro usando el $pagina.parámetros datos de $aplicación/tiendas.
Por ejemplo:
<scriptlang='ts'>
import { page } from '$app/stores'const params = $page.params;
script>
<main>
<h1>This is the {params.slug} pageh1>
main>
Aquí, usted asigna el $pagina.parámetros objetar a la parámetro variable y renderizar la param.slug datos en su aplicación.
La aplicación recupera el param.slug datos de su enlace. Por ejemplo, si navega a http://localhost: 5173/fuego, el contenido que se muestra en la aplicación será "Esta es la página de incendios".
Ahora conoce los conceptos básicos del enrutamiento en SvelteKit
El enrutamiento en SvelteKit es una característica poderosa que le permite estructurar su aplicación de una manera que tenga sentido. Comprender cómo usar esta función le permitirá crear aplicaciones web más eficientes y fáciles de usar. Ya sea que esté creando un pequeño proyecto personal o una aplicación a gran escala, el sistema de enrutamiento de SvelteKit tiene las herramientas que necesita para tener éxito.
