Implementer routingsystemet til din applikation ved hjælp af denne guide.

SvelteKit er en ramme til opbygning af webapplikationer i alle størrelser, med stor udviklingserfaring og fleksibel filbaseret routing. Rammerne kombinerer enkeltside apps' SEO og progressive forbedringsfordele med hurtig navigation af server-side renderede applikationer. En af de kritiske funktioner ved SvelteKit er dets routingsystem.

Forstå SvelteKit Routing

SvelteKit er en ramme bygget oven på Svelte. I SvelteKit følger routing et filbaseret system. Det betyder, at dine siders biblioteksstruktur bestemmer din applikations ruter.

For at forstå SvelteKit-rutesystemet bedre, skal du først oprette et SvelteKit-projekt. For at gøre dette skal du køre følgende kode i din terminal:

npm create svelte@latest my-app

Efter at have kørt kodeblokken ovenfor, vil du besvare en række anvisninger for at konfigurere din applikation.

Installer derefter de nødvendige afhængigheder til dit projekt. At gøre dette cd ind i dit projekt og kør:

instagram viewer 
npm install

Åbn projektet på udviklingsserveren ved at køre følgende kommando i din terminal:

npm run dev

Nu vil dit projekt være oppe og køre videre http://localhost: 5173/. Når du åbner applikationen på din udviklingsserver, vil du have en grænseflade svarende til billedet nedenfor.

Projektets rodrute ‘/’ svarer til en fil med navnet +side.svelte. Du kan finde +side.svelte fil efter filstien; src/ruter i dit projekt.

For at oprette forskellige ruter i SvelteKit kan du oprette mapper i din src/ruter vejviser. Hver mappe vil svare til en anden rute. Generer en +side.svelte fil i hver mappe for at definere indholdet af den rute.


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

Koden ovenfor vil leve inde i + side fil. Du vil oprette en svelte fil inde i om mappe i src/ruter vejviser. Denne fil vil indeholde indholdet for ruten. For at se ruten i din webbrowser skal du navigere til http://localhost: 5173/ca.

Navigerer til /about rute vil vise denne grænseflade på din skærm:

Forstå indlejrede ruter

Indlejrede ruter er en måde at strukturere routingsystemet på i en webapplikation. I en indlejret rutestruktur placeres ruter inden for andre ruter, hvilket skaber et hierarkisk forhold mellem dem. Du kan oprette indlejrede ruter i SvelteKit ved at placere mapper med +side.svelte fil i andre rutemapper under src/ruter vejviser.

For eksempel:

I dette eksempel indlejrer du stolpe rute inden for blog rute. At indlejre stolpe rute inden for blog rute, oprette stolpe mappe og dens +side.svelte fil inde i blog rute mappe.

For at få adgang til blogruten i din applikation skal du åbne din webbrowser og navigere til http://localhost: 5173/blog.

Postruten vil være tilgængelig kl http://localhost: 5173/blog/indlæg.

Layouts og fejlruter

SvelteKit definerer en layout til applikationen på samme måde som Next.js. Begge rammer bruger en layout komponent til at definere applikationens struktur.

SvelteKit bruger +layout.svelte at definere et layout for en gruppe sider. Du kan oprette en +layout.svelte fil i src/ruter bibliotek for at definere et layout for alle sider i din applikation eller i et underbibliotek for at definere et layout for en bestemt gruppe af sider.

Her er et eksempel på, hvordan du definerer en layoutrute for hele din applikation:

Eksemplet ovenfor giver en layoutrute. Filen indeholder en h1 element, der viser teksten "Dette er en SvelteKit-applikation." Det omfatter også en slot element. Det slot element er et særligt element, der definerer det sted, hvor applikationen vil gengive indholdet af dine ruter i layoutet. Det fungerer på samme måde som Vue-komponenter.

I dette tilfælde vil din applikation gengive indholdet af dine ruter under h1 element.

For at definere en fejlside skal du oprette en fil med navnet +fejl.svelte i src/ruter vejviser. Denne side vises, når der opstår en fejl under gengivelsen.

For eksempel:

Når du støder på en fejl, såsom at navigere til en ikke-eksisterende rute, vil din applikation falde tilbage til denne fejl rute i stedet.

For eksempel:

Ruten http://localhost: 5173/gå eksisterer ikke, så applikationen gengiver fejl rute i stedet.

Navigering mellem sider

At finde den bedste måde at navigere mellem de ruter, du opretter, er afgørende for en god oplevelse. Traditionelt bruger filbaseret routing i de fleste teknologier links til at navigere mellem forskellige sider. For at navigere mellem sider i SvelteKit kan du bruge et simpelt HTML-ankertag.

For eksempel kan du skrive denne kode i enhver rute, du ønsker, men du bør skrive den i layout rute over slot tag:

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

Ved at klikke på et ankermærke vil du navigere til den tilsvarende rute.

Dynamisk routing i SvelteKit

Dynamisk routing giver dig mulighed for gradvist at oprette ruter, som applikationen genererer baseret på data eller parametre. Det giver dig mulighed for at skabe fleksible og dynamiske webapplikationer, der håndterer forskellige ruter og viser indhold i henhold til specifikke data eller parametre.

For at oprette en dynamisk rute i SvelteKit skal du oprette en mappe med navnet [snegl] og så a +side.svelte fil i mappen for at definere rutens indhold. Bemærk, at du kan navngive mappen, hvad du vil, men sørg for altid at sætte navnet i parentes [ ].

Her er et eksempel på en dynamisk rute:

For at få adgang til denne rute i din webbrowser skal du navigere til dette link http://localhost: 5173/[snegl], hvor [snegl] kan være et hvilket som helst unikt udefineret rutenavn, du vælger.

Du kan få adgang til din ansøgning [snegl] parameter ved hjælp af $page.params data fra $app/butikker.

For eksempel:

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

Her tildeler du $page.params gøre indsigelse mod param variabel og gengiv param.slug data i din ansøgning.

Ansøgningen henter param.slug data fra dit link. Hvis du f.eks. navigerer til http://localhost: 5173/brand, vil indholdet, der vises på applikationen, være "Dette er brandsiden."

Nu kender du det grundlæggende i routing i SvelteKit

Routing i SvelteKit er en kraftfuld funktion, der giver dig mulighed for at strukturere din applikation på en måde, der giver mening. At forstå, hvordan du bruger denne funktion, vil gøre dig i stand til at skabe mere effektive og brugervenlige webapplikationer. Uanset om du opretter et lille personligt projekt eller en storstilet applikation, har SvelteKits routingsystem de værktøjer, du skal bruge for at få succes.