Úvod do smerovania v Svelte

Svelte je rýchlo rastúci webový rámec, ktorý môžete použiť na vytváranie webových stránok. Predstavuje sa ako ľahká a ľahko použiteľná alternatíva k populárnym frameworkom ako React a Vue.

Každý populárny framework JavaScript má sprievodnú knižnicu, ktorú môžete použiť na smerovanie. Zistite, ako vám Svelte umožňuje spravovať vaše adresy URL a kód, ktorý s nimi pracuje.

Populárne knižnice smerovania

Najpopulárnejšia smerovacia knižnica pre React je React Router, ktorú vytvoril tím Remix. Pre VueJS je tu Vue Router, ktorý dáva vývojárom jemnú kontrolu nad akoukoľvek navigáciou. Vo svete Svelte je najobľúbenejšia smerovacia knižnica štíhle smerovanie.

Ďalšou hlavnou knižnicou smerovania pre Svelte je štíhly navigátor. Keďže ide o vidlicu štíhle smerovanie, je užitočné dozvedieť sa najskôr o tejto knižnici.

Ako funguje knižnica štíhleho smerovania

Pre manipuláciu s trasami v Svelte sú tri dôležité komponenty:

Router, Odkaz, a Trasa. Ak ich chcete použiť vo svojej aplikácii, môžete tieto nástroje jednoducho importovať z štíhle smerovanie knižnica.

<skript>
import {Route, Router, Link} z "svelte-routing";
skript>

Komponent smerovača môže mať dve voliteľné podpery: základná cesta a url. The základná cesta vlastnosť je podobná základné meno vrtuľa v React Router.

Štandardne je nastavený na "/". basepath sa môže hodiť, ak má vaša aplikácia viacero vstupných bodov. Zvážte napríklad nasledujúci kód Svelte:

<skript>
 import { Route, Router, Link } z "svelte-routing";
 nech basepath = "/user";
 nech cesta = umiestnenie.názov cesty;
skript>
<Router {základná cesta}>
<divpo kliknutí={() => (cesta = umiestnenie.názov cesty)}>
<Odkazdo="/">Choď domovOdkaz>
<Odkazdo="/user/david">Prihláste sa ako DavidOdkaz>
div>
<Hlavná>
 si tu: <kód>{cesta}kód>
<Trasacesta="/">
<h1>Vitaj doma!h1>
Trasa>
<Trasacesta="/david">
<h1>Ahoj David!h1>
Trasa>
Hlavná>
Router>

Ak spustíte tento kód, všimnete si, že keď kliknete na Choď domov tlačidlo, prehliadač prejde na základnú cestu "/user". Trasa definuje komponent, ktorý by sa mal vykresliť, ak sa cesta zhoduje so zadanou hodnotou Trasa rekvizita.

Môžete definovať, ktoré prvky sa majú vykresliť v rámci komponentu Route alebo ako samostatné .štíhly súbor, pokiaľ tento súbor správne importujete. Napríklad:

<Trasacesta="/asi"komponent={About}/>

Vyššie uvedený blok kódu hovorí prehliadaču, aby vykreslil súbor App komponent, keď je názov cesty "/about".

Pri použití štíhle smerovanie, definovať interné prepojenia s Odkaz namiesto tradičného HTML a prvkov.

Je to podobné tomu, ako React Router spracováva interné odkazy; každý komponent Link by mal mať a do rekvizita, ktorá prehliadaču povie, na akú cestu má prejsť.

Keď prehliadač vykreslí komponent Svelte, Svelte automaticky prevedie všetky komponenty Link na ekvivalent a prvky, ktoré nahrádzajú do rekvizita s an href atribút. To znamená, že keď napíšete nasledovné:

<Odkazdo="/nejaká/cesta">Toto je Link Component v štíhlom smerovaníOdkaz>

Svelte ho prezentuje prehliadaču ako:

<ahref="/nejaká/cesta">Toto je Link Component v štíhlom smerovanía>

Namiesto tradičného by ste mali použiť komponent Link a prvok pri práci so šikmým smerovaním. To je preto, že a prvky štandardne vykonávajú opätovné načítanie stránky.

Vytvorenie SPA so Svelte a Svelte-Routing

Je čas uviesť všetko, čo ste sa naučili, do praxe vytvorením jednoduchej slovníkovej aplikácie, ktorá používateľovi umožní vyhľadávať slová. Tento projekt bude využívať bezplatné Dictionary API.

Ak chcete začať, uistite sa, že máte na svojom počítači nainštalovaný program Yarn a spustite:

priadza vytvára vite

Toto vytvorí lešenie pomocou nového projektu nástroj na zostavovanie Vite. Pomenujte svoj projekt a potom vyberte „Svelte“ ako rámec a „JavaScript“ ako variant. Potom spustite nasledujúce príkazy jeden po druhom:

cd
priadza
priadza pridať štíhle smerovanie
priadza výv

Ďalej odstráňte obsah súboru App.svelte súbor a zmeňte štruktúru projektu tak, aby vyzerala takto:

Z vyššie uvedeného obrázku môžete vidieť, že existuje priečinok „components“ s dvoma súbormi: Domov.štíhly a Význam.štíhly. Význam.štíhly je komponent, ktorý sa vykreslí, keď používateľ hľadá slovo.

Prejdite na App.svelte a importujte komponenty Route, Router a Link z knižnice Svelte-routing. Nezabudnite tiež importovať súbor Domov.štíhly a App.svelte komponentov.

<skript>
 import { Route, Router, Link } z "svelte-routing";
 importovať domov z "./components/Home.svelte";
 import Význam z "./components/Meaning.svelte";
skript>

Ďalej vytvorte komponent smerovača, ktorý obalí a Hlavná Prvok HTML s triedou „app“.

<Router>
<Hlavnátrieda="aplikácia">
Hlavná>
Router>

V Hlavná prvok, pridajte a nav prvok s komponentom Link ako jeho potomkom. Podpera "to" tohto komponentu Link by mala ukazovať na "/". Tento komponent umožní používateľovi prejsť na domovskú stránku.

<Hlavnátrieda="aplikácia">
<nav>
<Odkazdo="/">DomovOdkaz>
nav>
Hlavná>

Teraz je čas pracovať na trasách. Keď používateľ načíta aplikáciu, Domov komponent by sa mal vykresliť.

Prechod na "/find/:word" by mal vykresliť Význam komponent. Klauzula ":word" je parameter cesty.

Pre tento projekt sa nemusíte starať o CSS. Jednoducho nahraďte svoj vlastný obsah app.css súbor s obsahom app.css súbor z toto úložisko GitHub.

Teraz je čas definovať trasy. Cesta na úrovni koreňa by mala vykresliť Domov komponent, zatiaľ čo "/find/:word" by mal vykresliť Význam komponent.

<Trasacesta="/"komponent={Domov} />
<Trasacesta="/nájsť/:slovo"nech: params>
<Významslovo={params.word} />
Trasa>

Tento blok kódu používa nech direktíva na odovzdanie parametra "word" dole do Význam komponent ako rekvizita.

Teraz otvorte Domov.štíhly súbor a importujte súbor navigovať utility z knižnice "svelte-routing" a definujte premennú zadal Word.

<skript>
 import { navigovať } z "svelte-routing";
 nechať zadanéSlovo;
skript>

Pod skript tag, vytvorte hlavný prvok s triedou "homepage", potom vytvorte a div prvok s triedou "slovnik-text".

<Hlavnátrieda="domovská stránka">
<divtrieda="slovník-text">Slovníkdiv>
Hlavná>

Ďalej vytvorte formulár s dňa: predložiť smernice. Tento formulár by mal obsahovať dve deti: an vstup prvok, ktorého hodnota je viazaná na zadal Word premenná a tlačidlo odoslania, ktoré sa podmienečne vykreslí hneď, ako používateľ začne písať:

<formulárdňa: predložiť|zabrániťPredvolené={() => navigate(`/find/${enteredWord.toLowerCase()}`)}>
<vstup
 type="text"
 bind: value={enteredWord}
 placeholder="Začnite hľadať..."
 automatické zaostrovanie
 />
 {#if enterWord}
<tlačidlotypu="Predložiť">Hľadať slovotlačidlo>
 {/if}
formulár>

Tento blok kódu používa navigovať funkcia na presmerovanie používateľa po dokončení akcie odoslania. Teraz otvorte Význam.štíhly a v značke skriptu exportujte súbor slovo podporte a vytvorte chybná správa premenná:

exportovať let slovo;
let errorMessage = "Žiadne spojenie. Skontrolujte si internet";

Potom urobte požiadavku GET na Dictionary API, ktorá odovzdá slovo ako parameter:

asyncfunkciugetWordMeaning(slovo) {
konšt odpoveď = čakať priniesť (
` https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
 );
konšt json = čakať response.json();
konzoly.log (json);
ak (response.ok) {
vrátiť json;
 } inak {
 errorMessage = json.message;
hodiťNovýChyba(json);
 }
 }
nech sľub = getWordVýznam (slovo);

V bloku kódu vyššie asynchrónna funkcia vráti údaje JSON, ak je odpoveď úspešná. Premenná prísľub predstavuje výsledok getWordMeaning funkciu pri vyvolaní.

V značke definujte div s triedou význam-strana. Ďalej definujte prvok h1, ktorý obsahuje slovo premenná malými písmenami:

<divtrieda="významová stránka">
<h1>
 {word.toLowerCase()}
h1>
div>

Potom použite čakacie bloky Svelte na zavolanie getWordMeaning funkcia:

{#čakajte na sľub}
<p>Načítava...p>
{:potom záznamy}
{:catch}
 {chybná správa}
{/čakať}

Tento kód zobrazuje Načítava... text kedy požiadavka GET je podaná do API. Ak sa vyskytne chyba, zobrazí sa obsah chybná správa.

V {:potom záznamy} blok, pridajte nasledovné:

{#každý záznam ako záznam}
 {#každý záznam.významy ako význam}
<divtrieda="vstup">
<divtrieda="časť reči">
 {meaning.partOfSpeech}
div>
<ol>
 {#každý význam.definície ako definícia}
<li>
 {definition.definition}
<br />
<divtrieda="príklad">
 {#if definition.example}
 {definition.example}
 {/if}
div>
li>
 {/každý}
ol>
div>
 {/každý}
{/každý}

Ak sa sľub úspešne vyrieši, záznamy premenná obsahuje výsledné údaje.

Potom pre každú iteráciu vstup a význam, tento kód vykresľuje slovný druh pomocou význam.časť reči a zoznam používaných definícií definícia.definícia. Vykreslí tiež príklad vety, ak je k dispozícii.

To je všetko. Vytvorili ste slovník Single Page Application (SPA) pomocou štíhleho smerovania. Ak chcete, môžete veci posunúť ďalej alebo sa môžete pozrieť štíhly navigátor, vidlička štíhle smerovanie.

Zlepšenie používateľskej skúsenosti pomocou smerovania na strane klienta

Spracovanie smerovania v prehliadači namiesto na serveri má mnoho výhod. Aplikácie, ktoré využívajú smerovanie na strane klienta, môžu byť pre koncového používateľa plynulejšie, najmä ak sú spárované s animáciami a prechodmi.

Ak však chcete, aby sa váš web umiestnil vyššie vo vyhľadávačoch, mali by ste zvážiť spracovanie trás na serveri.