„SvelteKit“ maršruto parinkimo vadovas

„SvelteKit“ yra visų dydžių žiniatinklio taikomųjų programų kūrimo sistema, turinti didelę kūrimo patirtį ir lankstų failais pagrįstą maršrutą. Sistema sujungia vieno puslapio programų SEO ir laipsniško tobulinimo privalumus bei greitą serverio pusėje pateiktų programų naršymą. Viena iš svarbiausių „SvelteKit“ savybių yra jos maršruto parinkimo sistema.

„SvelteKit“ maršruto parinkimo supratimas

SvelteKit yra sistema pastatytas ant Sveltės. „SvelteKit“ maršruto parinkimas atliekamas pagal failų sistemą. Tai reiškia, kad jūsų puslapių katalogų struktūra nustato jūsų programos maršrutus.

Norėdami geriau suprasti SvelteKit maršruto parinkimo sistemą, pirmiausia sukurkite SvelteKit projektą. Norėdami tai padaryti, savo terminale paleiskite šį kodą:

npm create svelte@latest my-app

Paleidę aukščiau pateiktą kodo bloką, atsakysite į keletą raginimų, kaip sukonfigūruoti programą.

Tada įdiekite reikiamas projekto priklausomybes. Padaryti tai cd į savo projektą ir paleiskite:

npm install

Atidarykite projektą kūrimo serveryje vykdydami šią komandą savo terminale:

npm run dev

Dabar jūsų projektas pradės veikti http://localhost: 5173/. Kai atidarysite programą savo kūrimo serveryje, turėsite sąsają, panašią į toliau pateiktą paveikslėlį.

Pagrindinis projekto maršrutas ‘/’ atitinka failą pavadinimu +puslapis.svelte. Galite rasti +puslapis.svelte failas sekantis failo keliu; src/routes savo projekte.

Norėdami sukurti skirtingus maršrutus SvelteKit, galite sukurti aplankus savo src/routes katalogas. Kiekvienas aplankas atitiks skirtingą maršrutą. Sukurti a +puslapis.svelte failą kiekviename aplanke, kad apibrėžtumėte to maršruto turinį.

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

Aukščiau pateiktas kodas bus viduje +puslapis failą. Viduje sukursite ploną failą apie aplanke esančiame src/routes katalogas. Šiame faile bus maršruto turinys. Norėdami peržiūrėti maršrutą žiniatinklio naršyklėje, eikite į http://localhost: 5173/apie.

Naršymas į /about maršrutas ekrane parodys šią sąsają:

Įdėtų maršrutų supratimas

Įdėtieji maršrutai yra būdas struktūrizuoti maršruto parinkimo sistemą žiniatinklio programoje. Įdėtoje maršruto struktūroje maršrutai dedami į kitus maršrutus, sukuriant tarp jų hierarchinį ryšį. Galite sukurti įdėtus maršrutus SvelteKit, įdėdami aplankus su +puslapis.svelte failą kituose maršruto aplankuose src/routes katalogas.

Pavyzdžiui:

Šiame pavyzdyje įdedate lizdą paštu maršrutas viduje dienoraštį maršrutą. Norėdami įdėti lizdą paštu maršrutas viduje dienoraštį maršrutą, sukurkite paštu aplankas ir jo +puslapis.svelte failas viduje dienoraštį maršruto aplankas.

Norėdami savo programoje pasiekti tinklaraščio maršrutą, atidarykite žiniatinklio naršyklę ir eikite į http://localhost: 5173/tinklaraštis.

Pašto maršrutas bus pasiekiamas adresu http://localhost: 5173/tinklaraštis/įrašas.

Išdėstymai ir klaidų maršrutai

SvelteKit apibrėžia a programos išdėstymas panašiai kaip Next.js. Abi sistemos naudoja a išdėstymas komponentas programos struktūrai apibrėžti.

SvelteKit naudoja +išdėstymas.švelnus norėdami apibrėžti puslapių grupės maketą. Galite sukurti a +išdėstymas.švelnus failą src/routes katalogą, kad apibrėžtumėte visų programos puslapių išdėstymą arba pakatalogį, kad apibrėžtumėte konkrečios puslapių grupės išdėstymą.

Štai pavyzdys, kaip apibrėžti visos programos išdėstymo maršrutą:

Aukščiau pateiktame pavyzdyje pateikiamas išdėstymo maršrutas. Faile yra a h1 elementas, rodantis tekstą "Tai yra "SvelteKit" programa. Tai taip pat apima a lizdas elementas. The lizdas elementas yra specialus elementas, apibrėžiantis vietą, kurioje programa pateiks jūsų maršrutų turinį makete. Jis veikia taip pat, kaip ir „Vue“ komponentai.

Tokiu atveju jūsų programa pateiks jūsų maršrutų turinį žemiau h1 elementas.

Norėdami apibrėžti klaidos puslapį, sukurkite failą pavadinimu +klaida.svelte viduje src/routes katalogas. Šis puslapis bus rodomas, kai atvaizdavimo metu įvyks klaida.

Pavyzdžiui:

Atsiradus klaidai, pvz., naviguojant į neegzistuojantį maršrutą, jūsų programa sugrįš į šią klaida vietoj to maršrutas.

Pavyzdžiui:

Maršrutas http://localhost: 5173 už vieną kartą neegzistuoja, todėl programa pateikia klaida vietoj to maršrutas.

Naršymas tarp puslapių

Norint gauti gerą patirtį, labai svarbu rasti geriausią būdą naršyti tarp sukurtų maršrutų. Tradiciškai daugumos technologijų failais pagrįstas maršrutas naudoja nuorodas, kad būtų galima naršyti tarp skirtingų puslapių. Norėdami naršyti tarp „SvelteKit“ puslapių, galite naudoti paprastą HTML prierašo žymą.

Pavyzdžiui, galite parašyti šį kodą bet kuriuo norimu maršrutu, tačiau turėtumėte jį įrašyti išdėstymas maršrutas virš lizdas žyma:

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

Spustelėję bet kurią inkaro žymą, būsite nukreipti į atitinkamą maršrutą.

Dinaminis maršruto parinkimas „SvelteKit“.

Dinaminis maršruto parinkimas leidžia palaipsniui kurti maršrutus, kuriuos programa generuoja pagal duomenis arba parametrus. Tai leidžia kurti lanksčias ir dinamiškas žiniatinklio programas, kurios valdo skirtingus maršrutus ir rodo turinį pagal konkrečius duomenis ar parametrus.

Norėdami sukurti dinaminį maršrutą SvelteKit, sukurkite aplanką pavadinimu [šliužas] ir tada a +puslapis.svelte failą aplanke, kad apibrėžtumėte maršruto turinį. Atkreipkite dėmesį, kad galite pavadinti aplanką kaip norite, bet įsitikinkite, kad pavadinimas visada yra skliausteliuose [ ].

Štai dinamiško maršruto pavyzdys:

Norėdami pasiekti šį maršrutą savo žiniatinklio naršyklėje, eikite į šią nuorodą http://localhost: 5173/[šliužas], kur [šliužas] gali būti bet koks jūsų pasirinktas unikalus neapibrėžtas maršruto pavadinimas.

Galite pasiekti savo programą [šliužas] parametras naudojant $page.params duomenys iš $app/stores.

Pavyzdžiui:

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

Čia jūs priskiriate $page.params prieštarauti param kintamąjį ir atvaizduokite param.slug duomenis savo programoje.

Programa nuskaito param.slug duomenis iš jūsų nuorodos. Pavyzdžiui, jei naršote į http://localhost: 5173/gaisras, bus rodomas programoje turinys "Tai yra ugnies puslapis".

Dabar žinote „SvelteKit“ maršruto parinkimo pagrindus

„SvelteKit“ maršruto parinkimas yra galinga funkcija, leidžianti struktūrizuoti programą taip, kad ji būtų prasminga. Suprasdami, kaip naudotis šia funkcija, galėsite kurti efektyvesnes ir patogesnes žiniatinklio programas. Nesvarbu, ar kuriate nedidelį asmeninį projektą, ar didelio masto taikomąją programą, „SvelteKit“ maršruto parinkimo sistemoje yra įrankiai, kurių jums reikia norint pasiekti sėkmės.