Implementujte smerovací systém pre svoju aplikáciu pomocou tejto príručky.

SvelteKit je rámec na vytváranie webových aplikácií všetkých veľkostí, s vynikajúcimi skúsenosťami s vývojom a flexibilným smerovaním na základe súborov. Rámec kombinuje výhody SEO a progresívneho vylepšovania jednostránkových aplikácií s rýchlou navigáciou v aplikáciách vykreslených na strane servera. Jednou z kritických vlastností SvelteKit je jeho smerovací systém.

Pochopenie smerovania SvelteKit

SvelteKit je rámec postavený na vrchole Svelte. V SvelteKit sa smerovanie riadi systémom založeným na súboroch. To znamená, že adresárová štruktúra vašich stránok určuje trasy vašej aplikácie.

Aby ste lepšie pochopili smerovací systém SvelteKit, najprv vytvorte projekt SvelteKit. Ak to chcete urobiť, spustite vo svojom termináli nasledujúci kód:

npm create svelte@latest my-app

Po spustení bloku kódu vyššie odpoviete na sériu výziev na konfiguráciu vašej aplikácie.

Ďalej nainštalujte potrebné závislosti pre váš projekt. Robiť to cd do svojho projektu a spustite:

instagram viewer 
npm install

Otvorte projekt na vývojovom serveri spustením nasledujúceho príkazu vo vašom termináli:

npm run dev

Teraz bude váš projekt v prevádzke http://localhost: 5173/. Keď otvoríte aplikáciu na svojom vývojovom serveri, budete mať rozhranie podobné obrázku nižšie.

Hlavná cesta projektu ‘/’ zodpovedá súboru s názvom +strana.svelte. Môžete nájsť +strana.svelte súbor za cestou k súboru; src/trasy vo vašom projekte.

Na vytvorenie rôznych trás v SvelteKit môžete vytvoriť priečinky vo svojom src/trasy adresár. Každý priečinok bude zodpovedať inej trase. Generovať a +strana.svelte súbor v každom priečinku na definovanie obsahu tejto trasy.


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

Vyššie uvedený kód bude žiť vo vnútri +stránka súbor. Vo vnútri vytvoríte štíhly súbor o priečinok v src/trasy adresár. Tento súbor bude obsahovať obsah trasy. Ak chcete zobraziť trasu vo webovom prehliadači, prejdite na http://localhost: 5173/asi.

Navigácia na /about route zobrazí toto rozhranie na vašej obrazovke:

Pochopenie vnorených trás

Vnorené trasy predstavujú spôsob, ako štruktúrovať smerovací systém vo webovej aplikácii. Vo vnorenej štruktúre trás sú trasy umiestnené v rámci iných trás, čím sa medzi nimi vytvára hierarchický vzťah. V SvelteKit môžete vytvoriť vnorené trasy umiestnením priečinkov s +strana.svelte súbor v iných priečinkoch trasy pod src/trasy adresár.

Napríklad:

V tomto príklade vnoríte príspevok trasa v rámci blog trasu. Na hniezdenie príspevok trasa v rámci blog trasu, vytvorte príspevok priečinok a jeho +strana.svelte súbor vnútri blog priečinok trasy.

Ak chcete získať prístup k trase blogu vo svojej aplikácii, otvorte webový prehliadač a prejdite na http://localhost: 5173/blog.

Trasa pošty bude dostupná na http://localhost: 5173/blog/príspevok.

Rozloženia a chybové trasy

SvelteKit definuje a rozloženie pre aplikáciu podobným spôsobom ako Next.js. Oba rámce používajú a rozloženie komponent na definovanie štruktúry aplikácie.

SvelteKit používa +rozloženie.štíhle na definovanie rozloženia pre skupinu stránok. Môžete vytvoriť a +rozloženie.štíhle súbor v src/trasy adresár na definovanie rozloženia pre všetky stránky vo vašej aplikácii alebo v podadresári na definovanie rozloženia pre špecifickú skupinu stránok.

Tu je príklad, ako definovať trasu rozloženia pre celú vašu aplikáciu:

Vyššie uvedený príklad poskytuje trasu rozloženia. Súbor obsahuje a h1 prvok, ktorý zobrazuje text "Toto je aplikácia SvelteKit." Zahŕňa tiež a slot element. The slot element je špeciálny element, ktorý definuje miesto, kde aplikácia vykreslí obsah vašich trás v rámci layoutu. Funguje to rovnako ako komponenty Vue.

V tomto prípade vaša aplikácia vykreslí obsah vašich trás pod h1 element.

Ak chcete definovať chybovú stránku, vytvorte súbor s názvom +chyba.svelte v src/trasy adresár. Táto stránka sa zobrazí, keď sa počas vykresľovania vyskytne chyba.

Napríklad:

Keď narazíte na chybu, napríklad pri navigácii na neexistujúcu trasu, vaša aplikácia sa k nej vráti chyba namiesto toho.

Napríklad:

Cesta http://localhost: 5173/prejde neexistuje, takže aplikácia vykresľuje súbor chyba namiesto toho.

Navigácia medzi stránkami

Pre dobrý zážitok je kľúčové nájsť najlepší spôsob navigácie medzi trasami, ktoré vytvoríte. Tradične smerovanie založené na súboroch vo väčšine technológií používa odkazy na navigáciu medzi rôznymi stránkami. Na navigáciu medzi stránkami v SvelteKit môžete použiť jednoduchú značku kotvy HTML.

Tento kód môžete napríklad napísať ľubovoľnou cestou, ale mali by ste ho napísať do rozloženie trasa nad slot značka:

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

Kliknutím na ktorúkoľvek značku kotvy sa dostanete na príslušnú trasu.

Dynamické smerovanie v SvelteKit

Dynamické smerovanie vám umožňuje postupne vytvárať trasy, ktoré aplikácia generuje na základe údajov alebo parametrov. Umožňuje vám vytvárať flexibilné a dynamické webové aplikácie, ktoré zvládajú rôzne trasy a zobrazujú obsah podľa špecifických údajov alebo parametrov.

Ak chcete vytvoriť dynamickú trasu v SvelteKit, vytvorte priečinok s názvom [slimák] a potom a +strana.svelte súbor v priečinku na definovanie obsahu trasy. Všimnite si, že priečinok môžete pomenovať akokoľvek chcete, ale uistite sa, že názov vždy zalomíte do hranatých zátvoriek [ ].

Tu je príklad dynamickej trasy:

Ak chcete získať prístup k tejto trase vo webovom prehliadači, prejdite na tento odkaz http://localhost: 5173/[slimák], kde [slimák] môže byť akýkoľvek jedinečný nedefinovaný názov trasy, ktorý si vyberiete.

Môžete pristupovať k svojej aplikácii [slimák] pomocou parametra $page.params údaje z $app/stores.

Napríklad:

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

Tu priradíte $page.params namietať proti param premenné a vykresliť param.slimák údaje vo vašej aplikácii.

Aplikácia načíta súbor param.slimák údaje z vášho odkazu. Ak napríklad navigujete na http://localhost: 5173/požiar, bude obsah zobrazený v aplikácii "Toto je požiarna stránka."

Teraz poznáte základy smerovania v SvelteKit

Smerovanie v SvelteKit je výkonná funkcia, ktorá vám umožňuje štruktúrovať vašu aplikáciu spôsobom, ktorý dáva zmysel. Pochopenie toho, ako používať túto funkciu, vám umožní vytvárať efektívnejšie a užívateľsky prívetivejšie webové aplikácie. Či už vytvárate malý osobný projekt alebo rozsiahlu aplikáciu, smerovací systém SvelteKit má nástroje, ktoré potrebujete na úspech.