Uvod v usmerjanje v Svelte

Svelte je hitro rastoče spletno ogrodje, ki ga lahko uporabite za izdelavo spletnih mest. Predstavlja se kot lahka in za uporabo enostavna alternativa priljubljenim okvirom, kot sta React in Vue.

Vsako priljubljeno ogrodje JavaScript ima spremljevalno knjižnico, ki jo lahko uporabite za usmerjanje. Odkrijte, kako vam Svelte omogoča upravljanje vaših URL-jev in kode, ki jih obravnava.

Priljubljene usmerjevalne knjižnice

Najbolj priljubljena usmerjevalna knjižnica za React je React Router, ki ga je ustvarila ekipa Remix. Za VueJS obstaja Vue Router, ki razvijalcu omogoča popoln nadzor nad katero koli navigacijo. V svetu Svelte je najbolj priljubljena usmerjevalna knjižnica vitko usmerjanje.

Druga glavna usmerjevalna knjižnica za Svelte je svelte-navigator. Ker gre za vilice vitko usmerjanje, se je koristno najprej poučiti o tej knjižnici.

Kako deluje knjižnica svelte-routing

Obstajajo tri pomembne komponente za upravljanje poti v Svelteju: Usmerjevalnik, Povezava, in Pot. Če jih želite uporabiti v svoji aplikaciji, lahko preprosto uvozite te pripomočke iz vitko usmerjanje knjižnica.

<scenarij>
uvozi {Route, Router, Link} iz "svelte-routing";
scenarij>

Komponenta usmerjevalnika ima lahko dva izbirna elementa: osnovna pot in url. The osnovna pot lastnina je podobna osnovno ime prop v usmerjevalniku React.

Privzeto je nastavljen na "/". basepath lahko pride prav, če ima vaša aplikacija več vstopnih točk. Na primer, razmislite o naslednji kodi Svelte:

<scenarij>
 uvoz { Route, Router, Link } iz "svelte-routing";
 let basepath = "/user";
 naj pot = lokacija.imepoti;
scenarij>
<Usmerjevalnik {osnovna pot}>
<divna: klik={() => (pot = lokacija.imepoti)}>
<Povezavado="/">Pojdi domovPovezava>
<Povezavado="/uporabnik/david">Prijavite se kot DavidPovezava>
div>
<glavni>
 Tukaj ste: <Koda>{pot}Koda>
<Potpot="/">
<h1>Dobrodošel doma!h1>
Pot>
<Potpot="/david">
<h1>Živjo David!h1>
Pot>
glavni>
Usmerjevalnik>

Če zaženete to kodo, boste opazili, da ko kliknete Pojdi domov se brskalnik pomakne na osnovno pot "/user". Route definira komponento, ki naj se upodablja, če se pot ujema z vrednostjo v podanem Pot prop.

Določite lahko, kateri elementi bodo upodobljeni znotraj komponente Route ali kot ločeni .svelte datoteko, če to datoteko pravilno uvozite. Na primer:

<Potpot="/o"komponento={O}/>

Zgornji blok kode pove brskalniku, naj upodablja aplikacija komponento, ko je ime poti "/about".

Pri uporabi vitko usmerjanje, določite notranje povezave z Povezava namesto tradicionalnega HTML-ja a elementi.

To je podobno temu, kako React Router obravnava notranje povezave; vsaka komponenta povezave mora imeti a do prop, ki pove brskalniku, na katero pot naj se pomakne.

Ko brskalnik upodablja komponento Svelte, Svelte samodejno pretvori vse komponente Link v enakovredne a elementov, ki nadomeščajo do rekvizit z an href atribut. To pomeni, da ko napišete naslednje:

<Povezavado="/nekatera/pot">To je komponenta povezave v svelte-routingPovezava>

Svelte ga brskalniku predstavi kot:

<ahref="/nekatera/pot">To je komponenta povezave v svelte-routinga>

Uporabite komponento Link namesto tradicionalne a element pri delu z vitkim usmerjanjem. To je zato, ker a Elementi privzeto izvedejo ponovno nalaganje strani.

Ustvarjanje SPA s Svelte in Svelte-Routing

Čas je, da vse, kar ste se naučili, uporabite v praksi z ustvarjanjem preproste slovarske aplikacije, ki uporabniku omogoča iskanje besed. Ta projekt bo uporabil brezplačno API za slovar.

Če želite začeti, se prepričajte, da imate Yarn nameščen na vašem računalniku in zaženite:

preje ustvariti vite

To bo postavilo nov projekt z uporabo orodje za gradnjo Vite. Poimenujte svoj projekt, nato izberite "Svelte" kot okvir in "JavaScript" kot različico. Po tem zaženite naslednje ukaze enega za drugim:

cd
preja
preja dodajte vitko usmerjanje
preja dev

Nato izbrišite vsebino App.svelte datoteko in spremenite strukturo projekta, da bo videti takole:

Na zgornji ilustraciji lahko vidite, da obstaja mapa "components" z dvema datotekama: Domov.svelte in Pomen.svelte. Pomen.svelte je komponenta, ki bo upodobljena, ko uporabnik išče besedo.

Pomaknite se do App.svelte in uvozite komponente Route, Router in Link iz knjižnice svelte-routing. Poskrbite tudi za uvoz Domov.svelte in App.svelte komponente.

<scenarij>
 uvoz { Route, Router, Link } iz "svelte-routing";
 uvozi domov iz "./components/Home.svelte";
 uvozi pomen iz "./components/Meaning.svelte";
scenarij>

Nato ustvarite komponento usmerjevalnika, ki ovije a glavni Element HTML z razredom "app".

<Usmerjevalnik>
<glavnirazred="aplikacija">
glavni>
Usmerjevalnik>

V glavni element, dodajte a nav element s komponento Link kot podrejenim elementom. Podpora »to« te komponente povezave mora kazati na »/«. Ta komponenta bo uporabniku omogočila navigacijo na domačo stran.

<glavnirazred="aplikacija">
<nav>
<Povezavado="/">domovPovezava>
nav>
glavni>

Zdaj je čas za delo na progah. Ko uporabnik naloži aplikacijo, se domov komponenta bi morala biti upodobljena.

Navigacija do "/find/:word" bi morala upodobiti Pomen komponento. Klavzula ":word" je parameter poti.

Za ta projekt vam ni treba skrbeti za CSS. Preprosto zamenjajte vsebino svoje app.css datoteka z vsebino app.css datoteka iz tem repozitoriju GitHub.

Zdaj je čas za določitev poti. Pot korenske ravni bi morala upodobiti domov komponento, medtem ko bi moral "/find/:word" upodobiti Pomen komponento.

<Potpot="/"komponento={Domov} />
<Potpot="/najdi/:beseda"let: params>
<Pomenbeseda={params.word} />
Pot>

Ta blok kode uporablja pustiti za posredovanje parametra "word" navzdol v Pomen komponenta kot opor.

Zdaj odprite Domov.svelte datoteko in uvozite krmariti iz knjižnice "svelte-routing" in definirajte spremenljivko enteredWord.

<scenarij>
 import { navigate } from "svelte-routing";
 let enteredWord;
scenarij>

Pod scenarij ustvarite glavni element z razredom "homepage", nato ustvarite a div element z razredom "slovar-besedilo".

<glavnirazred="domača stran">
<divrazred="besedilo-slovar">Slovardiv>
glavni>

Nato ustvarite obrazec z na: predloži direktiva. Ta obrazec mora vsebovati dva otroka: an vnos element, katerega vrednost je vezana na enteredWord spremenljivka in gumb za oddajo, ki je pogojno upodobljen takoj, ko uporabnik začne tipkati:

<oblikana: predloži|preprečiti privzeto={() => navigate(`/find/${enteredWord.toLowerCase()}`)}>
<vnos
 tip="besedilo"
 bind: value={enteredWord}
 placeholder="Začnite z iskanjem ..."
 samodejno ostrenje
 />
 {#if enteredWord}
<gumbvrsta="oddaj">Beseda za iskanjegumb>
 {/if}
oblika>

Ta blok kode uporablja krmariti funkcijo za preusmeritev uporabnika, ko je dejanje pošiljanja končano. Zdaj odprite Pomen.svelte in v oznaki skripta izvozite beseda prop in ustvarite an obvestilo o napaki spremenljivka:

izvoz naj beseda;
let errorMessage = "Ni povezave. Preverite svoj internet";

Nato pošljite zahtevo GET za slovarski API, ki posreduje beseda kot parameter:

asinhfunkcijogetWordMeaning(beseda) {
konst odgovor = čakati prinesi (
` https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
 );
konst json = čakati odziv.json();
konzola.log (json);
če (odgovor.ok) {
vrnitev json;
 } drugače {
 sporočilo o napaki = json.message;
metatinovoNapaka(json);
 }
 }
pustiti promise = getWordMeaning (beseda);

V zgornjem bloku kode asinhrona funkcija vrne podatke JSON, če je odgovor uspešen. Obljubljena spremenljivka predstavlja rezultat getWordMeaning funkcija, ko je priklicana.

V oznaki definirajte div z razredom pomenska stran. Nato definirajte element h1, ki vsebuje beseda spremenljivka z malimi črkami:

<divrazred="stran s pomenom">
<h1>
 {word.toLowerCase()}
h1>
div>

Nato uporabite Sveltejeve čakalne bloke za klic getWordMeaning funkcija:

{#počakaj na obljubo}
<str>Nalaganje...str>
{:potem vnosi}
{:catch}
 {obvestilo o napaki}
{/počakaj}

Ta koda prikazuje Nalaganje... besedilo kdaj je narejena zahteva GET na API. Če pride do napake, bo prikazana vsebina obvestilo o napaki.

V {:potem vnosi} blok, dodajte naslednje:

{#vsak vnos kot vnos}
 {#each entry.meanings kot pomen}
<divrazred="vstop">
<divrazred="del govora">
 {meaning.partOfSpeech}
div>
<ol>
 {#vsak pomen.definicije kot definicija}
<li>
 {definicija.definicija}
<št />
<divrazred="primer">
 {#if definition.example}
 {definition.example}
 {/if}
div>
li>
 {/vsak}
ol>
div>
 {/vsak}
{/vsak}

Če se obljuba uspešno reši, se vnosi spremenljivka vsebuje nastale podatke.

Nato za vsako ponovitev vstop in pomen, ta koda upodobi del govora z uporabo pomen.partOfSpeech in seznam definicij z uporabo definicija.definicija. Upodobil bo tudi primer stavka, če je na voljo.

To je vse. Ustvarili ste slovarsko enostransko aplikacijo (SPA) z uporabo svelte-routing. Če želite, lahko stvari nadaljujete ali pa se odjavite svelte-navigator, vilice vitko usmerjanje.

Izboljšanje uporabniške izkušnje z usmerjanjem na strani odjemalca

Upravljanje z usmerjanjem v brskalniku namesto v strežniku ima številne prednosti. Aplikacije, ki uporabljajo usmerjanje na strani odjemalca, se lahko končnemu uporabniku zdijo bolj gladke, zlasti če so združene z animacijami in prehodi.

Če pa želite, da je vaše spletno mesto višje uvrščeno v iskalnikih, razmislite o upravljanju poti na strežniku.