Uvod u rutiranje u Svelteu

Svelte je brzorastući web okvir koji možete koristiti za izradu web stranica. Predstavlja se kao lagana alternativa popularnim okvirima kao što su React i Vue, jednostavna za korištenje.

Svaki popularni JavaScript okvir ima popratnu biblioteku koju možete koristiti za usmjeravanje. Otkrijte kako vam Svelte omogućuje upravljanje vašim URL-ovima i kodom koji ih obrađuje.

Popularne biblioteke za usmjeravanje

Najpopularnija biblioteka usmjeravanja za React je React Router, kreiran od strane Remix tima. Za VueJS postoji Vue Router koji razvojnom programeru daje finu kontrolu nad bilo kojom navigacijom. U svijetu Svelte, najpopularnija biblioteka usmjeravanja je vitko usmjeravanje.

Druga glavna biblioteka usmjeravanja za Svelte je vitak-navigator. Budući da je to vilica vitko usmjeravanje, korisno je prvo naučiti nešto o toj knjižnici.

Kako funkcionira knjižnica svelte-routing

Postoje tri važne komponente za rukovanje rutama u Svelteu: Usmjerivač, Veza, i Ruta. Da biste ih koristili u svojoj aplikaciji, možete jednostavno uvesti te pomoćne programe iz vitko usmjeravanje knjižnica.

<skripta>
import {Route, Router, Link} iz "svelte-routing";
skripta>

Komponenta usmjerivača može imati dva izborna rekvizita: osnovni put i url. The osnovni put svojstvo je slično osnovno ime prop u React Routeru.

Prema zadanim postavkama postavljeno je na "/". basepath može dobro doći ako vaša aplikacija ima više ulaznih točaka. Na primjer, razmotrite sljedeći Svelte kod:

<skripta>
 import { Ruta, Usmjerivač, Link } iz "svelte-routing";
 neka osnovni put = "/korisnik";
 neka staza = lokacija.nazivputa;
skripta>
<Usmjerivač {osnovni put}>
<divna klik={() => (path = location.pathname)}>
<Vezado="/">Ići kućiVeza>
<Vezado="/korisnik/david">Prijavite se kao DavidVeza>
div>
<glavni>
 Ti si ovdje: <kodirati>{staza}kodirati>
<Rutastaza="/">
<h1>Dobrodošao kući!h1>
Ruta>
<Rutastaza="/David">
<h1>Pozdrav Davide!h1>
Ruta>
glavni>
Usmjerivač>

Ako pokrenete ovaj kôd, primijetit ćete da kada kliknete na Ići kući gumb, preglednik prelazi na osnovni put "/user". Ruta definira komponentu koja bi se trebala prikazati ako se putanja podudara s navedenom vrijednosti Ruta oslonac

Možete definirati koje elemente prikazati unutar komponente Ruta ili kao zasebne .graciozan datoteku sve dok tu datoteku ispravno uvozite. Na primjer:

<Rutastaza="/oko"komponenta={Oko}/>

Gornji blok koda govori pregledniku da prikaže aplikacija komponenta kada je naziv staze "/about".

Prilikom korištenja vitko usmjeravanje, definirajte interne veze s Veza komponenta umjesto tradicionalnog HTML-a a elementi.

Ovo je slično načinu na koji React Router rukuje internim vezama; svaka komponenta veze treba imati a do prop koji pregledniku govori kojim putem treba ići.

Kada preglednik renderira Svelte komponentu, Svelte automatski pretvara sve komponente Linka u ekvivalentne a elementi, zamjenjujući do oslonac s an href atribut. To znači da kada napišete sljedeće:

<Vezado="/neki/put">Ovo je komponenta veze u svelte-routinguVeza>

Svelte ga predstavlja pregledniku kao:

<ahref="/neki/put">Ovo je komponenta veze u svelte-routingua>

Trebali biste koristiti komponentu Link umjesto tradicionalne a element pri radu sa svelte-routing. Ovo je zbog a elementi izvršavaju ponovno učitavanje stranice prema zadanim postavkama.

Stvaranje SPA-a uz Svelte i Svelte-Routing

Vrijeme je da sve što ste naučili primijenite u praksi stvaranjem jednostavne aplikacije rječnika koja korisniku omogućuje pretraživanje riječi. Ovaj će projekt koristiti besplatno API rječnika.

Za početak provjerite imate li Yarn instaliran na svom računalu i pokrenite:

pređa stvoriti vite

Ovo će postaviti skelu za novi projekt pomoću alat za izradu Vite. Imenujte svoj projekt, a zatim odaberite "Svelte" kao okvir i "JavaScript" kao varijantu. Nakon toga pokrenite sljedeće naredbe jednu za drugom:

CD
pređa
pređa dodati vitko usmjeravanje
pređa dev

Zatim izbrišite sadržaj App.svelte datoteku i promijenite strukturu projekta da izgleda ovako:

Na gornjoj ilustraciji možete vidjeti da postoji mapa "komponente" s dvije datoteke: Dom.svelte i Značenje.svelte. Značenje.svelte je komponenta koja će se prikazati kada korisnik traži riječ.

Idite do App.svelte datoteku i uvezite komponente rute, usmjerivača i veze iz biblioteke svelte-routing. Također obavezno uvezite Dom.svelte i App.svelte komponente.

<skripta>
 import { Ruta, Usmjerivač, Link } iz "svelte-routing";
 import Home iz "./components/Home.svelte";
 uvoz značenja iz "./components/Meaning.svelte";
skripta>

Zatim stvorite komponentu usmjerivača koja obavija a glavni HTML element s klasom "app".

<Usmjerivač>
<glavnirazreda="aplikacija">
glavni>
Usmjerivač>

u glavni element, dodajte a nav element s komponentom veze kao dijete. Prop "to" ove komponente veze treba pokazivati ​​na "/". Ova komponenta će omogućiti korisniku navigaciju do početne stranice.

<glavnirazreda="aplikacija">
<nav>
<Vezado="/">DomVeza>
nav>
glavni>

Sada je vrijeme za rad na rutama. Kada korisnik učita aplikaciju, Dom komponenta treba prikazati.

Kretanje do "/find/:word" trebalo bi prikazati Značenje komponenta. Klauzula ":word" je parametar staze.

Za ovaj projekt ne morate brinuti o CSS-u. Jednostavno zamijenite sadržaj svojim app.css datoteka sa sadržajem app.css datoteka iz ovo GitHub spremište.

Sada je vrijeme za definiranje ruta. Putanja korijenske razine trebala bi prikazati Dom dok bi "/find/:word" trebao prikazati Značenje komponenta.

<Rutastaza="/"komponenta={Dom} />
<Rutastaza="/nađi/:riječ"neka: parametri>
<Značenjeriječ={params.word} />
Ruta>

Ovaj blok koda koristi neka direktiva za prosljeđivanje parametra "riječ" na Značenje komponenta kao oslonac.

Sada otvorite Dom.svelte datoteku i uvoz ploviti uslužni program iz biblioteke "svelte-routing" i definirajte varijablu enteredWord.

<skripta>
 import {navigate} from "svelte-routing";
 neka unesenaRiječ;
skripta>

Ispod skripta oznaku, kreirajte glavni element s klasom "homepage", zatim kreirajte a div element s klasom "rječnik-tekst".

<glavnirazreda="početna stranica">
<divrazreda="rječnik-tekst">Rječnikdiv>
glavni>

Zatim izradite obrazac s na: podnijeti direktiva. Ovaj obrazac treba sadržavati dva djeteta: an ulazni element čija je vrijednost vezana za enteredWord varijabla i gumb za slanje koji se uvjetno prikazuje čim korisnik počne tipkati:

<oblikna: podnijeti|spriječiZadano={() => navigate(`/find/${enteredWord.toLowerCase()}`)}>
<ulazni
 tip="tekst"
 vezati: vrijednost={unesenariječ}
 placeholder="Započnite svoju pretragu..."
 autofokus
 />
 {#if enteredWord}
<dugmetip="podnijeti">Riječ za pretraživanjedugme>
 {/ako}
oblik>

Ovaj blok koda koristi ploviti funkcija za preusmjeravanje korisnika nakon završetka radnje slanja. Sada otvorite Značenje.svelte datoteku i, u oznaci skripte, izvezite riječ poduprijeti i stvoriti poruka o pogrešci varijabla:

izvoz neka riječ;
let errorMessage = "Nema veze. Provjerite svoj internet";

Zatim napravite GET zahtjev API-ju rječnika prosljeđujući riječ kao parametar:

asinkronifunkcijagetWordMeaning(riječ) {
konst odgovor = čekati dohvati (
` https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
 );
konst json = čekati odgovor.json();
konzola.log (json);
ako (odgovor.ok) {
povratak json;
 } drugo {
 poruka o pogrešci = json.message;
bacanjenoviGreška(json);
 }
 }
neka obećanje = getWordMeaning (riječ);

U gornjem bloku koda, asinkrona funkcija vraća JSON podatke ako je odgovor uspješan. Varijabla obećanja predstavlja rezultat getWordMeaning funkcija kada se pozove.

U označavanju definirajte div s klasom stranica značenja. Zatim definirajte element h1 koji drži riječ varijabla malim slovima:

<divrazreda="stranica-značenja">
<h1>
 {word.toLowerCase()}
h1>
div>

Zatim upotrijebite Svelteove blokove čekanja za pozivanje getWordMeaning funkcija:

{#čekaj obećanje}
<str>Učitavam...str>
{:zatim unosi}
{:ulov}
 {errorMessage}
{/čekati}

Ovaj kod prikazuje Učitavam... tekst kada napravljen je GET zahtjev na API. Ako postoji pogreška, prikazat će sadržaj poruka o pogrešci.

u {:zatim unosi} blok, dodajte sljedeće:

{#svaki unosi kao unos}
 {#svaki unos.značenja kao značenje}
<divrazreda="ulaz">
<divrazreda="dio govora">
 {meaning.partOfSpeech}
div>
<ol>
 {#svako značenje.definicije kao definicija}
<li>
 {definicija.definicija}
<br />
<divrazreda="primjer">
 {#if definition.example}
 {definition.example}
 {/ako}
div>
li>
 {/svaki}
ol>
div>
 {/svaki}
{/svaki}

Ako se obećanje uspješno riješi, unose varijabla sadrži rezultirajuće podatke.

Zatim za svaku iteraciju unos i značenje, ovaj kod prikazuje dio govora pomoću značenje.partOfSpeech i popis definicija pomoću definicija.definicija. Također će prikazati primjer rečenice, ako je dostupan.

To je to. Stvorili ste rječničku aplikaciju za jednu stranicu (SPA) koristeći svelte-routing. Možete krenuti dalje ako želite ili se možete odjaviti vitak-navigator, vilica od vitko usmjeravanje.

Poboljšanje korisničkog iskustva s usmjeravanjem na strani klijenta

Mnogo je prednosti rukovanja usmjeravanjem u pregledniku umjesto na poslužitelju. Aplikacije koje koriste usmjeravanje na strani klijenta krajnjem korisniku mogu djelovati glatkije, osobito kada su uparene s animacijama i prijelazima.

Međutim, ako želite da vaše web mjesto bude bolje rangirano u tražilicama, razmislite o rukovanju rutama na poslužitelju.