Implementera routingsystemet för din applikation med hjälp av denna guide.

SvelteKit är ett ramverk för att bygga webbapplikationer av alla storlekar, med stor utvecklingserfarenhet och flexibel filbaserad routing. Ramverket kombinerar ensidiga appars SEO och progressiva förbättringsfördelar med snabb navigering av renderade applikationer på serversidan. En av de kritiska egenskaperna hos SvelteKit är dess routingsystem.

Förstå SvelteKit Routing

SvelteKit är ett ramverk byggd ovanpå Svelte. I SvelteKit följer routing ett filbaserat system. Det betyder att dina sidors katalogstruktur bestämmer din applikations rutter.

För att förstå SvelteKit-ruttsystemet bättre, skapa först ett SvelteKit-projekt. För att göra detta, kör följande kod i din terminal:

npm create svelte@latest my-app

Efter att ha kört kodblocket ovan kommer du att svara på en rad uppmaningar för att konfigurera din applikation.

Installera sedan nödvändiga beroenden för ditt projekt. Att göra detta CD in i ditt projekt och kör:

npm install
instagram viewer

Öppna projektet på utvecklingsservern genom att köra följande kommando i din terminal:

npm run dev

Nu kommer ditt projekt att vara igång http://localhost: 5173/. När du öppnar applikationen på din utvecklingsserver kommer du att ha ett gränssnitt som liknar bilden nedan.

Projektets rotväg ‘/’ motsvarar en fil med namnet +page.svelte. Du kan hitta +page.svelte fil som följer filsökvägen; src/rutter i ditt projekt.

För att skapa olika rutter i SvelteKit kan du skapa mappar i din src/rutter katalog. Varje mapp kommer att motsvara en annan rutt. Generera en +page.svelte fil i varje mapp för att definiera innehållet i den rutten.


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

Koden ovan kommer att leva inuti +sida fil. Du kommer att skapa en svelte fil inuti handla om mapp i src/rutter katalog. Den här filen kommer att innehålla ruttens innehåll. För att se rutten i din webbläsare, navigera till http://localhost: 5173/ca.

Navigerar till /about rutten kommer att visa detta gränssnitt på din skärm:

Förstå kapslade rutter

Kapslade rutter är ett sätt att strukturera routingsystemet i en webbapplikation. I en kapslad ruttstruktur placeras rutter inom andra rutter, vilket skapar en hierarkisk relation mellan dem. Du kan skapa kapslade rutter i SvelteKit genom att placera mappar med +page.svelte fil i andra ruttmappar under src/rutter katalog.

Till exempel:

I det här exemplet kapslar du posta rutt inom blogg rutt. Att häcka posta rutt inom blogg rutt, skapa posta mapp och dess +page.svelte fil inuti blogg ruttmapp.

För att komma åt bloggvägen i din applikation, öppna din webbläsare och navigera till http://localhost: 5173/blogg.

Postvägen kommer att finnas tillgänglig kl http://localhost: 5173/blogg/inlägg.

Layouter och felvägar

SvelteKit definierar en layout för applikationen på liknande sätt som Next.js. Båda ramverken använder en layout komponent för att definiera applikationens struktur.

SvelteKit använder +layout.svelte för att definiera en layout för en grupp av sidor. Du kan skapa en +layout.svelte fil i src/rutter katalog för att definiera en layout för alla sidor i din applikation eller i en underkatalog för att definiera en layout för en specifik grupp av sidor.

Här är ett exempel på hur du definierar en layoutrutt för hela din applikation:

Exemplet ovan ger en layoutrutt. Filen innehåller en h1 element som visar texten "Detta är en SvelteKit-applikation." Den innehåller också en spår element. De spår element är ett speciellt element som definierar platsen där applikationen ska återge innehållet i dina rutter i layouten. Det fungerar på samma sätt som Vue-komponenter.

I det här fallet kommer din applikation att återge innehållet på dina rutter under h1 element.

För att definiera en felsida, skapa en fil med namnet +error.svelte i src/rutter katalog. Den här sidan visas när ett fel uppstår under renderingen.

Till exempel:

När du stöter på ett fel, som att navigera till en obefintlig rutt, kommer din applikation att falla tillbaka till detta fel väg istället.

Till exempel:

Rutten http://localhost: 5173/gå existerar inte, så applikationen återger fel väg istället.

Navigera mellan sidor

Att hitta det bästa sättet att navigera mellan de rutter du skapar är avgörande för en bra upplevelse. Traditionellt använder filbaserad routing i de flesta tekniker länkar för att navigera mellan olika sidor. För att navigera mellan sidor i SvelteKit kan du använda en enkel HTML-ankartagg.

Du kan till exempel skriva den här koden i vilken rutt du vill, men du bör skriva den i layout rutten ovanför spår märka:

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

Genom att klicka på valfri ankartagg navigerar du till motsvarande rutt.

Dynamisk routing i SvelteKit

Dynamisk routing låter dig successivt skapa rutter som applikationen genererar baserat på data eller parametrar. Det gör att du kan skapa flexibla och dynamiska webbapplikationer som hanterar olika rutter och visar innehåll enligt specifika data eller parametrar.

För att skapa en dynamisk rutt i SvelteKit, skapa en mapp med namnet [snigel] och sedan a +page.svelte filen i mappen för att definiera ruttens innehåll. Observera att du kan namnge mappen vad du vill, men se till att alltid linda namnet inom parentes [ ].

Här är ett exempel på en dynamisk rutt:

För att komma åt den här rutten i din webbläsare, navigera till den här länken http://localhost: 5173/[snigel], var [snigel] kan vara vilket unikt odefinierat ruttnamn du väljer.

Du kan komma åt din applikation [snigel] parameter med hjälp av $page.params data från $app/butiker.

Till exempel:

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

Här tilldelar du $page.params invända mot param variabel och rendera param.slug data i din ansökan.

Applikationen hämtar param.slug data från din länk. Till exempel om du navigerar till http://localhost: 5173/brand, kommer innehållet som visas i applikationen att vara "Det här är eldsidan."

Nu kan du grunderna för routing i SvelteKit

Routing i SvelteKit är en kraftfull funktion som låter dig strukturera din applikation på ett vettigt sätt. Genom att förstå hur du använder den här funktionen kan du skapa mer effektiva och användarvänliga webbapplikationer. Oavsett om du skapar ett litet personligt projekt eller en storskalig applikation, har SvelteKits routingsystem de verktyg du behöver för att lyckas.