Implementer rutingsystemet for applikasjonen din ved hjelp av denne veiledningen.
SvelteKit er et rammeverk for å bygge nettapplikasjoner i alle størrelser, med stor utviklingserfaring og fleksibel filbasert ruting. Rammeverket kombinerer enkeltside-appers SEO og progressive forbedringsfordeler med rask navigering av renderte applikasjoner på serversiden. En av de kritiske funksjonene til SvelteKit er rutingsystemet.
Forstå SvelteKit-ruting
SvelteKit er et rammeverk bygget på toppen av Svelte. I SvelteKit følger ruting et filbasert system. Dette betyr at sidens katalogstruktur bestemmer programmets ruter.
For å forstå SvelteKit-rutesystemet bedre, må du først lage et SvelteKit-prosjekt. For å gjøre dette, kjør følgende kode i terminalen din:
npm create svelte@latest my-app
Etter å ha kjørt kodeblokken ovenfor, vil du svare på en rekke spørsmål for å konfigurere applikasjonen din.
Installer deretter de nødvendige avhengighetene for prosjektet ditt. Å gjøre dette cd inn i prosjektet ditt og kjør:
npm install
Åpne prosjektet på utviklingsserveren ved å kjøre følgende kommando i terminalen din:
npm run dev
Nå vil prosjektet ditt være i gang http://localhost: 5173/. Når du åpner applikasjonen på utviklingsserveren din, vil du ha et grensesnitt som ligner på bildet nedenfor.
Prosjektets rotvei ‘/’ tilsvarer en fil som heter +side.svelte. Du kan finne +side.svelte fil som følger filbanen; src/ruter i prosjektet ditt.
For å lage forskjellige ruter i SvelteKit kan du lage mapper i din src/ruter katalog. Hver mappe vil tilsvare en annen rute. Generer en +side.svelte fil i hver mappe for å definere innholdet i ruten.
<main>
<h2> This is the about page h2>
main>
Koden ovenfor vil leve inne i +side fil. Du vil lage en svelte-fil inne i Om mappe i src/ruter katalog. Denne filen vil inneholde innholdet for ruten. For å se ruten i nettleseren din, naviger til http://localhost: 5173/ca.
Navigerer til /about ruten vil vise dette grensesnittet på skjermen din:
Forstå nestede ruter
Nestede ruter er en måte å strukturere rutingsystemet på i en nettapplikasjon. I en nestet rutestruktur plasseres ruter innenfor andre ruter, og skaper et hierarkisk forhold mellom dem. Du kan lage nestede ruter i SvelteKit ved å plassere mapper med +side.svelte filen inne i andre rutemapper under src/ruter katalog.
For eksempel:
I dette eksemplet hekker du post rute innenfor blogg rute. Å hekke post rute innenfor blogg rute, opprette post mappe og dens +side.svelte fil inne i blogg rute mappe.
For å få tilgang til bloggruten i applikasjonen din, åpne nettleseren og naviger til http://localhost: 5173/blogg.
Postruten vil være tilgjengelig kl http://localhost: 5173/blogg/innlegg.
Oppsett og feilruter
SvelteKit definerer en layout for applikasjonen på en lignende måte som Next.js. Begge rammene bruker en oppsett komponent for å definere strukturen til applikasjonen.
SvelteKit bruker +layout.svelte for å definere et oppsett for en gruppe sider. Du kan lage en +layout.svelte fil i src/ruter katalog for å definere et oppsett for alle sidene i applikasjonen eller i en underkatalog for å definere et oppsett for en bestemt gruppe sider.
Her er et eksempel på hvordan du definerer en layoutrute for hele applikasjonen din:
Eksemplet ovenfor gir en layoutrute. Filen inneholder en h1 element som viser teksten "Dette er en SvelteKit-applikasjon." Det inkluderer også en spor element. De spor element er et spesielt element som definerer plasseringen der applikasjonen vil gjengi innholdet i rutene dine i oppsettet. Det fungerer på samme måte som Vue-komponenter.
I dette tilfellet vil applikasjonen gjengi innholdet på rutene dine under h1 element.
For å definere en feilside, lag en fil med navnet +error.svelte i src/ruter katalog. Denne siden vises når det oppstår en feil under gjengivelsen.
For eksempel:
Når du støter på en feil, for eksempel å navigere til en ikke-eksisterende rute, vil applikasjonen din falle tilbake til denne feil rute i stedet.
For eksempel:
Ruten http://localhost: 5173/gå eksisterer ikke, så applikasjonen gjengir feil rute i stedet.
Navigere mellom sider
Å finne den beste måten å navigere mellom rutene du lager er avgjørende for en god opplevelse. Tradisjonelt bruker filbasert ruting i de fleste teknologier lenker for å navigere mellom forskjellige sider. For å navigere mellom sider i SvelteKit kan du bruke en enkel HTML-ankertag.
Du kan for eksempel skrive denne koden i hvilken som helst rute du vil, men du bør skrive den i oppsett rute over spor stikkord:
<ul>
<li>
<ahref="/">Homea>
li>
<li>
<ahref="/about">Abouta>
li>
<li>
<ahref="/blog">Bloga>
li>
<li>
<ahref="/blog/post">Posta>
li>
ul>
Ved å klikke på en hvilken som helst ankermerke vil du navigere til den tilsvarende ruten.
Dynamisk ruting i SvelteKit
Dynamisk ruting lar deg gradvis lage ruter applikasjonen genererer basert på data eller parametere. Den lar deg lage fleksible og dynamiske nettapplikasjoner som håndterer forskjellige ruter og viser innhold i henhold til spesifikke data eller parametere.
For å lage en dynamisk rute i SvelteKit, opprett en mappe med navnet [mordersnegle] og deretter a +side.svelte fil i mappen for å definere rutens innhold. Merk at du kan navngi mappen hva du vil, men sørg for å alltid sette navnet i parentes [ ].
Her er et eksempel på en dynamisk rute:
For å få tilgang til denne ruten i nettleseren din, naviger til denne lenken http://localhost: 5173/[snegl], hvor [mordersnegle] kan være et hvilket som helst unikt udefinert rutenavn du velger.
Du kan få tilgang til applikasjonen din [mordersnegle] parameter ved å bruke $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 protestere mot param variabel og gjengi param.slug data i søknaden din.
Applikasjonen henter param.slug data fra lenken din. For eksempel hvis du navigerer til http://localhost: 5173/brann, vil innholdet som vises på applikasjonen være "Dette er brannsiden."
Nå vet du det grunnleggende om ruting i SvelteKit
Ruting i SvelteKit er en kraftig funksjon som lar deg strukturere applikasjonen din på en måte som gir mening. Hvis du forstår hvordan du bruker denne funksjonen, kan du lage mer effektive og brukervennlige nettapplikasjoner. Enten du lager et lite personlig prosjekt eller en storstilt applikasjon, har SvelteKits rutingsystem verktøyene du trenger for å lykkes.
