Bevezetés az útválasztásba a Svelte-ben

A Svelte egy gyorsan növekvő webes keretrendszer, amellyel webhelyeket készíthet. Könnyű, könnyen használható alternatívaként jelenik meg az olyan népszerű keretrendszerekkel szemben, mint a React és a Vue.

Minden népszerű JavaScript-keretrendszer rendelkezik egy kísérő könyvtárral, amelyet az útválasztáshoz használhat. Fedezze fel, hogyan teszi lehetővé a Svelte az URL-ek és az azokat kezelő kódok kezelését.

Népszerű útválasztási könyvtárak

A React legnépszerűbb útválasztási könyvtára a React Router, amelyet a Remix csapata készített. A VueJS-hez létezik a Vue Router, amely a fejlesztő számára pontos szabályozást biztosít a navigáció felett. A Svelte világában a legnépszerűbb útválasztási könyvtár az karcsú-routing.

A Svelte másik fő útválasztási könyvtára az karcsú-navigátor. Mivel ez egy villa karcsú-routing, érdemes először megismerni a könyvtárat.

Hogyan működik a karcsú-útválasztó könyvtár

A Svelte-i útvonalak kezelésének három fontos összetevője van: Router, Link, és Útvonal. Az alkalmazásban való használatukhoz egyszerűen importálja ezeket a segédprogramokat a karcsú-routing könyvtár.

<forgatókönyv>
import {Route, Router, Link} a "svelte-routing"-ból;
forgatókönyv>

A Router komponensnek két opcionális kelléke lehet: alapútvonal és url. A alapútvonal tulajdonság hasonló a alapnév prop a React Routerben.

Alapértelmezés szerint "/"-re van állítva. A basepath hasznos lehet, ha az alkalmazásnak több belépési pontja van. Vegyük például a következő Svelte-kódot:

<forgatókönyv>
 import { Route, Router, Link } from "svelte-routing";
 let basepath = "/felhasználó";
 let path = location.pathname;
forgatókönyv>
<Router {alapútvonal}>
<divkattintásra={() => (útvonal = hely.útnév)}>
<Linknak nek="/">Menj hazaLink>
<Linknak nek="/felhasználó/dávid">Jelentkezz be David névenLink>
div>
<fő->
 Ön itt van: <kód>{pálya}kód>
<Útvonalpálya="/">
<h1>Üdv itthon!h1>
Útvonal>
<Útvonalpálya="/dávid">
<h1>Szia David!h1>
Útvonal>
fő->
Router>

Ha futtatja ezt a kódot, észre fogja venni, hogy amikor rákattint a Menj haza gombot, a böngésző a „/user” alapútvonalra navigál. Az útvonal meghatározza azt az összetevőt, amelynek meg kell jelennie, ha az elérési út egyezik a megadott értékkel Útvonal támaszt.

Meghatározhatja, hogy mely elemek jelenjenek meg az Útvonal komponensen belül vagy különállóként .karcsú fájlt, amíg megfelelően importálja a fájlt. Például:

<Útvonalpálya="/ról ről"összetevő={Ról ről}/>

A fenti kódblokk utasítja a böngészőt, hogy jelenítse meg a App összetevő, ha az elérési út neve "/about".

Használat során karcsú-routing, határozzon meg belső kapcsolatokat a Link komponenst a hagyományos HTML helyett a elemeket.

Ez hasonló ahhoz, ahogy a React Router kezeli a belső hivatkozásokat; minden Link komponensnek rendelkeznie kell a nak nek prop, amely megmondja a böngészőnek, hogy melyik útvonalra kell navigálnia.

Amikor a böngésző Svelte komponenst jelenít meg, a Svelte automatikusan konvertálja az összes Link összetevőt egyenértékűvé a elemeket, felváltva a nak nek támasztékkal egy href tulajdonság. Ez azt jelenti, hogy amikor a következőket írod:

<Linknak nek="/valamilyen/útvonal">Ez egy link komponens a svelte-routingbanLink>

A Svelte a következőképpen mutatja be a böngészőnek:

<ahref="/valamilyen/útvonal">Ez egy link komponens a svelte-routingbana>

Használja a Link komponenst a hagyományos helyett a elem a ferde útválasztásnál. Ez azért van, mert a az elemek alapértelmezés szerint oldal újratöltést hajtanak végre.

SPA létrehozása Svelte és Svelte-Routing segítségével

Itt az ideje, hogy mindazt, amit tanult, a gyakorlatba ültessen egy egyszerű szótáralkalmazás létrehozásával, amely lehetővé teszi a felhasználók számára, hogy szavakat keressenek. Ez a projekt az ingyenes Szótár API.

A kezdéshez győződjön meg arról, hogy a Yarn telepítve van a gépére, és futtassa:

fonal létre vite

Ez egy új projektet fog felépíteni a Vite építőeszköz. Nevezze el projektjét, majd válassza a „Svelte” keretet, és a „JavaScript” változatot. Ezt követően futtassa egymás után a következő parancsokat:

CD
fonal
fonal add svelte-routing
fonal dev

Ezután törölje a tartalmát App.svelte fájlt, és módosítsa a projekt szerkezetét a következőre:

A fenti ábrán látható, hogy van egy "összetevők" mappa két fájllal: Otthon.karcsú és Jelentése.karcsú. Jelentése.karcsú az az összetevő, amely akkor jelenik meg, amikor a felhasználó szóra keres.

Navigáljon a App.svelte fájlt, és importálja a Route, Router és Link összetevőket a svelte-routing könyvtárból. Győződjön meg arról is, hogy importálja a Otthon.karcsú és App.svelte alkatrészek.

<forgatókönyv>
 import { Route, Router, Link } from "svelte-routing";
 Import Home from "./components/Home.svelte";
 Import Meaning from "./components/Meaning.svelte";
forgatókönyv>

Ezután hozzon létre egy Router komponenst, amely becsomagolja a fő- HTML-elem az „app” osztállyal.

<Router>
<fő-osztály="alkalmazás">
fő->
Router>

Ban,-ben fő- elemet, add hozzá a nav elemet, amelynek gyermeke egy Link komponens. Ennek a Link komponensnek a "to" pontjának "/"-re kell mutatnia. Ez az összetevő lehetővé teszi a felhasználó számára, hogy a kezdőlapra navigáljon.

<fő-osztály="alkalmazás">
<nav>
<Linknak nek="/">itthonLink>
nav>
fő->

Itt az ideje, hogy dolgozzunk az útvonalakon. Amikor a felhasználó betölti az alkalmazást, a itthon komponensnek meg kell jelennie.

A "/find/:word" elemre navigálva a Jelentése összetevő. A ":word" záradék egy elérési út paraméter.

Ennél a projektnél nem kell aggódnia a CSS miatt. Egyszerűen cserélje ki a saját tartalmát app.css fájl tartalmával app.css fájltól ezt a GitHub-tárat.

Itt az ideje, hogy meghatározzuk az útvonalakat. A gyökérszintű elérési útnak a itthon komponenst, míg a "/find/:word"-nek a Jelentése összetevő.

<Útvonalpálya="/"összetevő={Itthon} />
<Útvonalpálya="/finn/:word"legyen: params>
<Jelentéseszó={params.word} />
Útvonal>

Ez a kódblokk a hagyja direktíva átadja a "word" paramétert a Jelentése alkatrészt kellékként.

Most nyissa meg a Otthon.karcsú fájlt, és importálja a hajózik segédprogramot a "svelte-routing" könyvtárból, és definiáljon egy változót belépettWord.

<forgatókönyv>
 import { navigate } from "svelte-routing";
 engedd be a Word;
forgatókönyv>

Alatt forgatókönyv címkét, hozzon létre egy fő elemet a "homepage" osztállyal, majd hozzon létre egy div elem a "szótár-szöveg" osztályú.

<fő-osztály="honlap">
<divosztály="szótár-szöveg">Szótárdiv>
fő->

Ezután hozzon létre egy űrlapot egy on: benyújtani irányelv. Ennek az űrlapnak két gyermeket kell tartalmaznia: an bemenet elem, amelynek értéke a belépettWord változó és egy küldés gomb, amely feltételesen megjelenik, amint a felhasználó elkezd gépelni:

<formaon: benyújtani|preventDefault={() => navigate(`/find/${enteredWord.toLowerCase()}`)}>
<bemenet
 type="text"
 bind: value={enteredWord}
 placeholder="Kezdje el a keresést..."
 autofókusz
 />
 {#if entryWord}
<gombtípus="Beküldés">Keresés a Wordbengomb>
 {/ha}
forma>

Ez a kódblokk a hajózik funkció a felhasználó átirányításához, miután a küldési művelet befejeződött. Most nyissa meg a Jelentése.karcsú fájlt, és a script címkében exportálja a szó támaszt és hozzon létre egy hiba üzenet változó:

export let word;
let errorMessage = "Nincs kapcsolat. Ellenőrizze az internetet";

Ezután küldjön egy GET kérelmet a Dictionary API-nak, átadva a szó paraméterként:

asyncfunkciógetWordMeaning(szó) {
const válasz = várja fetch(
` https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
 );
const json = várja válasz.json();
konzol.log (json);
ha (response.ok) {
Visszatérés json;
 } más {
 errorMessage = json.message;
dobásújHiba(json);
 }
 }
hagyja ígéret = getWordMeaning (szó);

A fenti kódblokkban az aszinkron függvény a JSON-adatokat adja vissza, ha a válasz sikeres. Az ígéret változó a getWordMeaning funkció meghívásakor.

A jelölésben adjon meg egy div-t az osztállyal jelentés-oldal. Ezután definiáljon egy h1 elemet, amely tartalmazza a szó változó kisbetűvel:

<divosztály="jelentés-oldal">
<h1>
 {word.toLowerCase()}
h1>
div>

Ezután használja a Svelte várakozási blokkjait a híváshoz getWordMeaning funkció:

{#várom ígéretet}
<p>Betöltés...p>
{:akkor bejegyzések}
{:fogás}
 {hiba üzenet}
{/várja}

Ez a kód megjeleníti a Betöltés... szöveg mikor megtörténik a GET kérés az API-hoz. Ha hiba van, akkor megjelenik a tartalma hiba üzenet.

Ban,-ben {:akkor bejegyzések} blokkot, adja hozzá a következőket:

{#minden bejegyzés bejegyzésként}
 {#each entry.meanings as jelentése}
<divosztály="belépés">
<divosztály="beszéd része">
 {meaning.partOfSpeech}
div>
<ol>
 {#minden jelentés.definíciók definícióként}
<li>
 {definition.definition}
<br />
<divosztály="példa">
 {#if definition.example}
 {definition.example}
 {/ha}
div>
li>
 {/minden egyes}
ol>
div>
 {/minden egyes}
{/minden egyes}

Ha az ígéret sikeresen megoldódik, a bejegyzés változó tartalmazza az eredményül kapott adatokat.

Ezután minden iterációhoz belépés és jelentése, ez a kód a beszédrészt a használatával jeleníti meg jelentése.Beszédrész és a használó definíciók listája meghatározás.definíció. Egy példamondatot is megjelenít, ha van ilyen.

Ez az. Létrehozott egy szótári egyoldalas alkalmazást (SPA) a svelte-routing használatával. Ha akarja, továbbviheti a dolgokat, vagy megnézheti karcsú-navigátor, egy villát karcsú-routing.

A felhasználói élmény javítása az ügyféloldali útválasztással

Számos előnye van annak, ha az útválasztást a böngészőben kezeli a szerver helyett. Az ügyféloldali útválasztást használó alkalmazások a végfelhasználó számára simábbak lehetnek, különösen, ha animációkkal és átmenetekkel párosítják őket.

Ha azonban azt szeretné, hogy webhelye magasabb helyezést érjen el a keresőkben, fontolja meg az útvonalak szerveren történő kezelését.