Una guida al routing in SvelteKit

SvelteKit è un framework per la creazione di applicazioni Web di tutte le dimensioni, con una grande esperienza di sviluppo e un routing flessibile basato su file. Il framework combina la SEO delle app a pagina singola e i vantaggi del miglioramento progressivo con la navigazione rapida delle applicazioni renderizzate lato server. Una delle caratteristiche fondamentali di SvelteKit è il suo sistema di routing.

Comprensione del routing SvelteKit

SvelteKit è un framework costruito in cima a Svelte. In SvelteKit, il routing segue un sistema basato su file. Ciò significa che la struttura della directory delle tue pagine determina i percorsi della tua applicazione.

Per comprendere meglio il sistema di routing SvelteKit, innanzitutto creare un progetto SvelteKit. Per fare ciò, esegui il seguente codice nel tuo terminale:

npm create svelte@latest my-app

Dopo aver eseguito il blocco di codice sopra, risponderai a una serie di richieste per configurare la tua applicazione.

Successivamente, installa le dipendenze necessarie per il tuo progetto. Per fare questo CD nel tuo progetto ed esegui:

npm install

Apri il progetto sul server di sviluppo eseguendo il seguente comando nel tuo terminale:

npm run dev

Ora, il tuo progetto sarà attivo e funzionante http://localhost: 5173/. Quando apri l'applicazione sul tuo server di sviluppo, avrai un'interfaccia simile all'immagine qui sotto.

Il percorso principale del progetto ‘/’ corrisponde a un file denominato +pagina.svelte. Puoi trovare il +pagina.svelte file seguendo il percorso del file; src/percorsi nel tuo progetto.

Per creare diversi percorsi in SvelteKit, puoi creare cartelle nel tuo src/percorsi directory. Ogni cartella corrisponderà a un percorso diverso. Genera un +pagina.svelte file in ogni cartella per definire il contenuto di quel percorso.

<main>
<h2> This is the about page h2>
main>

Il codice sopra vivrà all'interno del file +pagina file. Creerai un file snello all'interno del file Di cartella in src/percorsi directory. Questo file conterrà il contenuto per il percorso. Per visualizzare il percorso nel tuo browser web, vai a http://localhost: 5173/circa.

Navigando verso il /about route visualizzerà questa interfaccia sullo schermo:

Comprensione dei percorsi nidificati

Le route nidificate sono un modo per strutturare il sistema di routing in un'applicazione web. In una struttura di route nidificata, le route vengono posizionate all'interno di altre route, creando una relazione gerarchica tra di esse. Puoi creare percorsi nidificati in SvelteKit posizionando le cartelle con l'estensione +pagina.svelte file all'interno di altre cartelle di percorso sotto il file src/percorsi directory.

Per esempio:

In questo esempio, annidi il file inviare percorso all'interno del blog itinerario. Per nidificare il inviare percorso all'interno del blog percorso, creare il file inviare cartella e il suo +pagina.svelte file all'interno del file blog cartella del percorso.

Per accedere al percorso del blog nella tua applicazione, apri il tuo browser Web e vai a http://localhost: 5173/blog.

Il percorso postale sarà disponibile all'indirizzo http://localhost: 5173/blog/articolo.

Layout e percorsi di errore

SvelteKit definisce a layout per l'applicazione in modo simile a Next.js. Entrambi i framework utilizzano a disposizione componente per definire la struttura dell'applicazione.

SvelteKit usa il +layout.svelto per definire un layout per un gruppo di pagine. Puoi creare un +layout.svelto file nel src/percorsi directory per definire un layout per tutte le pagine nell'applicazione o in una sottodirectory per definire un layout per un gruppo specifico di pagine.

Ecco un esempio di come definire un percorso di layout per l'intera applicazione:

L'esempio precedente fornisce un percorso di layout. Il file contiene un h1 elemento che visualizza il testo "Questa è un'applicazione SvelteKit." Include anche un fessura elemento. IL fessura element è un elemento speciale che definisce la posizione in cui l'applicazione renderà il contenuto dei tuoi percorsi all'interno del layout. Funziona allo stesso modo dei componenti Vue.

In questo caso, la tua applicazione renderà il contenuto dei tuoi percorsi sotto il file h1 elemento.

Per definire una pagina di errore, creare un file denominato +errore.svelto nel src/percorsi directory. Questa pagina verrà visualizzata quando si verifica un errore durante il rendering.

Per esempio:

Quando incontri un errore, come la navigazione verso un percorso inesistente, la tua applicazione tornerà a questo errore invece rotta.

Per esempio:

La strada http://localhost: 5173/va non esiste, quindi l'applicazione esegue il rendering del file errore invece rotta.

Navigazione tra le pagine

Trovare il modo migliore per navigare tra i percorsi che crei è fondamentale per una buona esperienza. Tradizionalmente, il routing basato su file nella maggior parte delle tecnologie utilizza collegamenti per navigare tra pagine diverse. Per navigare tra le pagine in SvelteKit, puoi utilizzare un semplice tag di ancoraggio HTML.

Ad esempio, puoi scrivere questo codice in qualsiasi percorso desideri, ma dovresti scriverlo nel file disposizione percorso sopra il fessura etichetta:

<ul>
<li>
<ahref="/">Homea>
li>
<li>
<ahref="/about">Abouta>
li>
<li>
<ahref="/blog">Bloga>
li>
<li>
<ahref="/blog/post">Posta>
li>
ul>

Facendo clic su qualsiasi tag di ancoraggio si passerà al percorso corrispondente.

Instradamento dinamico in SvelteKit

Il routing dinamico consente di creare progressivamente percorsi generati dall'applicazione in base a dati o parametri. Consente di creare applicazioni Web flessibili e dinamiche che gestiscono percorsi diversi e visualizzano i contenuti in base a dati o parametri specifici.

Per creare un percorso dinamico in SvelteKit, creare una cartella denominata [lumaca] e poi A +pagina.svelte file nella cartella per definire il contenuto del percorso. Nota che puoi nominare la cartella come preferisci, ma assicurati di racchiudere sempre il nome tra parentesi [ ].

Ecco un esempio di percorso dinamico:

Per accedere a questo percorso nel tuo browser web, vai a questo link http://localhost: 5173/[lumaca], Dove [lumaca] può essere qualsiasi nome di percorso univoco non definito scelto.

Puoi accedere alla tua applicazione [lumaca] parametro utilizzando il $pagina.param dati da $app/store.

Per esempio:

<scriptlang='ts'>
 import { page } from '$app/stores'
 const params = $page.params;
script>
<main>
<h1>This is the {params.slug} pageh1>
main>

Qui, assegni il file $pagina.param opporsi al parametro variabile e rendere il param.slug dati nella tua applicazione.

L'applicazione recupera il file param.slug dati dal tuo link. Ad esempio, se navighi su http://localhost: 5173/incendio, il contenuto visualizzato sull'applicazione sarà "Questa è la pagina del fuoco."

Ora conosci le basi del routing in SvelteKit

Il routing in SvelteKit è una potente funzionalità che ti consente di strutturare la tua applicazione in modo sensato. Comprendere come utilizzare questa funzione ti consentirà di creare applicazioni Web più efficienti e intuitive. Che si tratti di creare un piccolo progetto personale o un'applicazione su larga scala, il sistema di routing di SvelteKit ha gli strumenti necessari per avere successo.