Směrování je technika, kterou budete používat s mnoha frameworky, včetně Svelte. Zjistěte, jak jej využít ve svůj prospěch.
Svelte je rychle rostoucí webový rámec, který můžete použít k vytváření webových stránek. Představuje se jako lehká, snadno použitelná alternativa k oblíbeným frameworkům jako React a Vue.
Každý populární framework JavaScript má doprovodnou knihovnu, kterou můžete použít pro směrování. Zjistěte, jak vám Svelte umožňuje spravovat adresy URL a kód, který je zpracovává.
Oblíbené knihovny směrování
Nejoblíbenější směrovací knihovnou pro React je React Router, vytvořený týmem Remix. Pro VueJS existuje Vue Router, který poskytuje vývojářům jemnou kontrolu nad jakoukoli navigací. Ve světě Svelte je nejoblíbenější knihovna směrování štíhlé směrování.
Další hlavní knihovnou směrování pro Svelte je štíhlý navigátor. Vzhledem k tomu, že je to vidlice štíhlé směrování, je užitečné se nejprve o této knihovně dozvědět.
Jak funguje knihovna štíhlého směrování
Pro manipulaci s trasami ve Svelte existují tři důležité komponenty:
Směrovač, Odkaz, a Trasa. Chcete-li je použít ve své aplikaci, můžete tyto nástroje jednoduše importovat z štíhlé směrování knihovna.<skript>
import {Route, Router, Link} z "svelte-routing";
skript>
Součást Router může mít dvě volitelné podpěry: základní cesta a url. The základní cesta vlastnost je podobná jako základní jméno vrtule v React Routeru.
Ve výchozím nastavení je nastaven na "/". basepath se může hodit, pokud má vaše aplikace více vstupních bodů. Zvažte například následující kód Svelte:
<skript>
import { Route, Router, Link } z "svelte-routing";
let basepath = "/user";
nech cesta = umístění.název cesty;
skript><Směrovač {základní cesta}>
<divpři kliknutí={() => (cesta = umístění.název cesty)}>
<Odkazna="/">Jít domůOdkaz>
<Odkazna="/user/david">Přihlaste se jako DavidOdkaz>
div><hlavní>
Jsi tady: <kód>{cesta}kód><Trasacesta="/">
<h1>Vítej doma!h1>
Trasa>
<Trasacesta="/david">
<h1>Ahoj Davide!h1>
Trasa>
hlavní>
Směrovač>
Pokud tento kód spustíte, všimnete si, že když kliknete na Jít domů tlačítko, prohlížeč přejde na základní cestu "/user". Trasa definuje komponentu, která by se měla vykreslit, pokud cesta odpovídá zadané hodnotě Trasa podpěra.
Můžete definovat, které prvky se mají vykreslit uvnitř komponenty Trasa nebo jako samostatné .štíhlý soubor, pokud tento soubor správně importujete. Například:
<Trasacesta="/o"komponent={O}/>
Blok kódu výše říká prohlížeči, aby vykreslil Aplikace komponenta, když je název cesty "/about".
Při použití štíhlé směrování, definovat vnitřní vazby s Odkaz namísto tradičního HTML A Prvky.
Je to podobné tomu, jak React Router zpracovává interní odkazy; každá komponenta Link by měla mít a na prop, který prohlížeči říká, na jakou cestu má přejít.
Když prohlížeč vykreslí komponentu Svelte, Svelte automaticky převede všechny komponenty Link na ekvivalentní A prvky, nahrazující na rekvizita s an href atribut. To znamená, že když napíšete následující:
<Odkazna="/nějaká/cesta">Toto je Link Component v štíhlém směrováníOdkaz>
Svelte to prezentuje prohlížeči jako:
<Ahref="/nějaká/cesta">Toto je Link Component v štíhlém směrováníA>
Měli byste použít komponentu Link namísto tradiční A prvek při práci s velte-routingem. To je proto, že A prvky ve výchozím nastavení provádějí opětovné načtení stránky.
Vytvoření SPA pomocí Svelte a Svelte-Routing
Je čas uvést vše, co jste se naučili, do praxe vytvořením jednoduché slovníkové aplikace, která uživateli umožní vyhledávat slova. Tento projekt bude využívat zdarma Slovníkové API.
Chcete-li začít, ujistěte se, že máte na svém počítači nainstalovaný Yarn a spusťte:
příze vytvořit vite
Tím se vytvoří lešení nového projektu pomocí sestavení nástroje Vite. Pojmenujte svůj projekt a poté zvolte „Svelte“ jako rámec a „JavaScript“ jako variantu. Poté spusťte následující příkazy jeden po druhém:
CD
příze
příze přidat štíhlé směrování
příze voj
Dále smažte obsah souboru App.svelte soubor a změňte strukturu projektu tak, aby vypadala takto:
Z obrázku výše můžete vidět, že existuje složka „components“ se dvěma soubory: Home.velte a Význam.velte. Význam.velte je komponenta, která se vykreslí, když uživatel hledá slovo.
Přejděte na App.svelte a importujte komponenty Route, Router a Link z knihovny Svelte-routing. Nezapomeňte také importovat Home.velte a App.svelte komponenty.
<skript>
import { Route, Router, Link } z "svelte-routing";
import Home z "./components/Home.svelte";
import Význam z "./components/Meaning.svelte";
skript>
Dále vytvořte komponentu Router, která obalí a hlavní HTML element s třídou "app".
<Směrovač>
<hlavnítřída="aplikace">
hlavní>
Směrovač>
V hlavní prvek, přidejte a nav prvek s komponentou Link jako jeho potomkem. Prop "to" této komponenty Link by měl ukazovat na "/". Tato součást umožní uživateli přejít na domovskou stránku.
<hlavnítřída="aplikace">
<nav>
<Odkazna="/">DomovOdkaz>
nav>
hlavní>
Nyní je čas pracovat na trasách. Když uživatel načte aplikaci, Domov komponenta by se měla vykreslit.
Navigace na "/find/:word" by měla vykreslit Význam komponent. Klauzule ":word" je parametr cesty.
Pro tento projekt se nemusíte starat o CSS. Jednoduše vyměňte obsah svého app.css soubor s obsahem app.css soubor z toto úložiště GitHub.
Nyní je čas definovat trasy. Cesta na úrovni kořene by měla vykreslit soubor Domov komponenta, zatímco "/find/:word" by mělo vykreslit Význam komponent.
<Trasacesta="/"komponent={Domov} />
<Trasacesta="/najít/:slovo"let: params>
<Významslovo={params.word} />
Trasa>
Tento blok kódu používá nechat direktiva pro předání parametru "word" dolů do Význam komponenta jako rekvizita.
Nyní otevřete Home.velte soubor a importujte navigovat utility z knihovny "svelte-routing" a definujte proměnnou zadal Word.
<skript>
import { navigovat } z "svelte-routing";
nechat zadanéSlovo;
skript>
Pod skript tag, vytvořte hlavní prvek s třídou "domovská stránka" a poté vytvořte a div prvek s třídou "slovník-text".
<hlavnítřída="domovská stránka">
<divtřída="slovník-text">Slovníkdiv>
hlavní>
Dále vytvořte formulář s na: předložit směrnice. Tento formulář by měl obsahovat dvě děti: an vstup prvek, jehož hodnota je vázána na zadal Word proměnná a tlačítko Odeslat, které se podmíněně vykreslí, jakmile uživatel začne psát:
<formulářna: předložit|preventVýchozí={() => navigate(`/find/${enteredWord.toLowerCase()}`)}>
<vstup
type="text"
vazba: value={enteredWord}
placeholder="Začněte hledat..."
autofokus
/>
{#if enterWord}
<knoflíktyp="Předložit">Hledat slovoknoflík>
{/li}
formulář>
Tento blok kódu používá navigovat funkce pro přesměrování uživatele po dokončení akce odeslání. Nyní otevřete Význam.velte a ve značce script exportujte soubor slovo podpírat a vytvořit chybové hlášení proměnná:
export let slovo;
let errorMessage = "Žádné připojení. Zkontrolujte si internet";
Dále proveďte požadavek GET na Dictionary API, které předá slovo jako parametr:
asynchronnífunkcegetWordMeaning(slovo) {
konst odpověď = čekat vynést(
` https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
);konst json = čekat response.json();
řídicí panel.log (json);-li (response.ok) {
vrátit se json;
} jiný {
errorMessage = json.message;
házetNovýChyba(json);
}
}
nechat slib = getWordVýznam (slovo);
V bloku kódu výše asynchronní funkce vrátí data JSON, pokud je odpověď úspěšná. Proměnná slib představuje výsledek getWordMeaning funkce při vyvolání.
V označení definujte div s třídou významová stránka. Dále definujte prvek h1, který obsahuje slovo proměnná malými písmeny:
<divtřída="významová stránka">
<h1>
{word.toLowerCase()}
h1>
div>
Dále použijte Svelteovy čekací bloky k volání getWordMeaning funkce:
{#čekám na slib}
<p>Načítání...p>
{:pak záznamy}
{:chytit}
{chybové hlášení}
{/čekat}
Tento kód zobrazuje Načítání... text kdy je proveden požadavek GET do API. Pokud dojde k chybě, zobrazí se obsah chybové hlášení.
V {:pak záznamy} blok, přidejte následující:
{#každý záznam jako záznam}
{#každý záznam.významy jako význam}
<divtřída="vstup">
<divtřída="část mluvy">
{meaning.partOfSpeech}
div><ol>
{#každý význam.definice jako definice}
<li>
{definition.definition}
<br />
<divtřída="příklad">
{#if definition.example}
{definice.example}
{/li}
div>
li>
{/každý}
ol>
div>
{/každý}
{/každý}
Pokud se příslib úspěšně vyřeší, záznamy proměnná obsahuje výsledná data.
Potom pro každou iteraci vstup a význam, tento kód vykreslí slovní druh pomocí význam.část Řeči a seznam definic pomocí definice.definice. Vykreslí také příklad věty, pokud je k dispozici.
A je to. Vytvořili jste slovník Single Page Application (SPA) pomocí štíhlého směrování. Pokud chcete, můžete věci posunout dále, nebo se můžete podívat štíhlý navigátor, vidlička štíhlé směrování.
Zlepšení uživatelského zážitku pomocí směrování na straně klienta
Zpracování směrování v prohlížeči namísto na serveru má mnoho výhod. Aplikace, které využívají směrování na straně klienta, se mohou koncovému uživateli zdát plynulejší, zvláště když jsou spárovány s animacemi a přechody.
Pokud však chcete, aby se vaše webové stránky ve vyhledávačích umístily výše, měli byste zvážit zpracování tras na serveru.
