O introducere în rutare în Svelte

Svelte este un cadru web în creștere rapidă pe care îl puteți folosi pentru a construi site-uri web. Se prezintă ca o alternativă ușoară și ușor de utilizat la cadrele populare precum React și Vue.

Fiecare cadru JavaScript popular are o bibliotecă însoțitoare pe care o puteți folosi pentru rutare. Descoperiți cum Svelte vă permite să vă gestionați adresele URL și codul care le gestionează.

Biblioteci de rutare populare

Cea mai populară bibliotecă de rutare pentru React este React Router, creat de echipa Remix. Pentru VueJS, există Vue Router care oferă dezvoltatorului control fin asupra oricărei navigații. În lumea Svelte, cea mai populară bibliotecă de rutare este svelte-routing.

Cealaltă bibliotecă principală de rutare pentru Svelte este svelt-navigator. Din moment ce este o furculiță de svelte-routing, este util să aflați mai întâi despre acea bibliotecă.

Cum funcționează biblioteca cu rutare subțire

Există trei componente importante pentru manipularea rutelor în Svelte: Router, Legătură, și Traseu. Pentru a le utiliza în aplicația dvs., puteți pur și simplu să importați aceste utilitare din svelte-routing bibliotecă.

<scenariu>
import {Route, Router, Link} din "svelte-routing";
scenariu>

Componenta Router poate avea două accesorii opționale: calea de bază și url. The calea de bază proprietatea este similară cu nume de bază prop în React Router.

În mod implicit, este setat la „/”. calea de bază poate fi utilă dacă aplicația dvs. are mai multe puncte de intrare. De exemplu, luați în considerare următorul cod Svelte:

<scenariu>
 import { Route, Router, Link } din "svelte-routing";
 let basepath = "/utilizator";
 let path = location.pathname;
scenariu>
<Router {calea de bază}>
<divpe: click={() => (cale = locație.nume cale)}>
<Legăturăla="/">Du-te acasăLegătură>
<Legăturăla=„/utilizator/david”>Conectați-vă ca DavidLegătură>
div>
<principal>
 Eşti aici: <cod>{cale}cod>
<Traseucale="/">
<h1>Bine ai venit acasa!h1>
Traseu>
<Traseucale="/david">
<h1>Bună David!h1>
Traseu>
principal>
Router>

Dacă rulați acest cod, veți observa că atunci când faceți clic pe Du-te acasă butonul, browserul navighează la calea de bază „/user”. Ruta definește componenta care ar trebui să fie redată dacă calea se potrivește cu valoarea specificată Traseu recuzită.

Puteți defini ce elemente să redate în interiorul componentei Route sau ca separat .svelte fișierul atâta timp cât importați acel fișier în mod corespunzător. De exemplu:

<Traseucale="/despre"componentă={Despre}/>

Blocul de cod de mai sus îi spune browserului să redea App componentă când numele căii este „/about”.

Atunci când se utilizează svelte-routing, definiți legături interne cu Legătură componentă în loc de HTML tradițional A elemente.

Acest lucru este similar cu modul în care React Router gestionează legăturile interne; fiecare componentă Link ar trebui să aibă un la prop care spune browserului în ce cale să navigheze.

Când browserul redă o componentă Svelte, Svelte convertește automat toate componentele Link în echivalent A elemente, înlocuind la prop cu o href atribut. Aceasta înseamnă că atunci când scrieți următoarele:

<Legăturăla=„/unele/cale”>Aceasta este o componentă Link în svelte-routingLegătură>

Svelte îl prezintă browserului ca:

<Ahref=„/unele/cale”>Aceasta este o componentă Link în svelte-routingA>

Ar trebui să utilizați componenta Link în loc de cea tradițională A element atunci când lucrați cu svelte-routing. Asta pentru ca A elementele realizează o reîncărcare a paginii în mod implicit.

Crearea unui SPA cu Svelte și Svelte-Routing

Este timpul să puneți în practică tot ceea ce ați învățat prin crearea unei aplicații simple de dicționar care să permită utilizatorului să caute cuvinte. Acest proiect va folosi gratuit Dicţionar API.

Pentru a începe, asigurați-vă că aveți Yarn instalat pe mașina dvs. și rulați:

yarn create vite

Acest lucru va schelă un nou proiect folosind instrumentul Vite build. Denumiți-vă proiectul, apoi alegeți „Svelte” ca cadru și „JavaScript” ca variantă. După aceea, rulați următoarele comenzi una după alta:

CD
fire
fire adăuga svelte-routing
fire dev

Apoi, ștergeți conținutul fișierului App.svelte fișier și modificați structura proiectului astfel încât să arate astfel:

Din ilustrația de mai sus, puteți vedea că există un folder „componente” cu două fișiere: Acasă.svelte și Înţeles.svelte. Înţeles.svelte este componenta care va reda atunci când utilizatorul caută un cuvânt.

Navigați la App.svelte fișier și importați componentele Route, Router și Link din biblioteca svelte-routing. De asemenea, asigurați-vă că importați Acasă.svelte și App.svelte componente.

<scenariu>
 import { Route, Router, Link } din "svelte-routing";
 import Home din „./components/Home.svelte”;
 import Sensul din „./components/Meaning.svelte”;
scenariu>

Apoi, creați o componentă Router care include a principal Element HTML cu clasa „app”.

<Router>
<principalclasă=„aplicație”>
principal>
Router>

În principal element, adăugați a nav element cu o componentă Link ca copil. Elementul „la” al acestei componente Link ar trebui să indice „/”. Această componentă va permite utilizatorului să navigheze la pagina de pornire.

<principalclasă=„aplicație”>
<nav>
<Legăturăla="/">AcasăLegătură>
nav>
principal>

Acum este timpul să lucrăm la trasee. Când utilizatorul încarcă aplicația, Acasă componenta ar trebui să redea.

Navigarea la „/find/:word” ar trebui să redă Sens componentă. Clauza „:word” este un parametru de cale.

Pentru acest proiect, nu trebuie să vă faceți griji cu privire la CSS. Pur și simplu înlocuiți conținutul propriu app.css fișier cu conținutul app.css dosar de la acest depozit GitHub.

Acum este timpul să definim rutele. Calea la nivel de rădăcină ar trebui să redă Acasă componenta, în timp ce „/find/:word” ar trebui să redea Sens componentă.

<Traseucale="/"componentă={Acasă} />
<Traseucale=„/find/:word”lasa: params>
<Senscuvânt={params.word} />
Traseu>

Acest bloc de cod folosește lăsa directivă de a transmite parametrul „cuvânt” la Sens componentă ca prop.

Acum, deschideți Acasă.svelte fișier și importați fișierul naviga utilitarul din biblioteca „svelte-routing” și definiți o variabilă a introdus Cuvânt.

<scenariu>
 import { navigate } din "svelte-routing";
 lasă enteredWord;
scenariu>

Sub scenariu eticheta, creați un element principal cu clasa „homepage”, apoi creați un div element cu clasa „dicționar-text”.

<principalclasă="pagina principala">
<divclasă=„text-dicționar”>Dicţionardiv>
principal>

Apoi, creați un formular cu un pe: trimite directivă. Acest formular ar trebui să conțină doi copii: a intrare element a cărui valoare este legată de a introdus Cuvânt variabilă și un buton de trimitere care este redat condiționat de îndată ce utilizatorul începe să tasteze:

<formăpe: trimite|preventDefault={() => navigate(`/find/${enteredWord.toLowerCase()}`)}>
<intrare
 tip="text"
 bind: value={enteredWord}
 placeholder="Începeți căutarea..."
 autofocus
 />
 {#dacă a fost introdus Cuvânt}
<butontip="Trimite">Caută Wordbuton>
 {/dacă}
formă>

Acest bloc de cod folosește naviga funcția de redirecționare a utilizatorului odată ce acțiunea de trimitere s-a încheiat. Acum, deschideți Înţeles.svelte fișier și, în eticheta de script, exportați fișierul cuvânt prop și creați o mesaj de eroare variabil:

export let word;
let errorMessage = "Fără conexiune. Verificați-vă internetul";

Apoi, faceți o solicitare GET către API-ul Dicționar care transmite cuvânt ca parametru:

asincronfuncţiegetWordMeaning(cuvânt) {
const răspuns = asteapta aduce(
` https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
 );
const json = asteapta răspuns.json();
consolă.log (json);
dacă (răspuns.ok) {
întoarcere json;
 } altfel {
 errorMessage = json.message;
aruncanouEroare(json);
 }
 }
lăsa promise = getWordMeaning (cuvânt);

În blocul de cod de mai sus, funcția asincronă returnează datele JSON dacă răspunsul are succes. Variabila de promisiune reprezintă rezultatul getWordMeaning funcția atunci când este invocată.

În marcaj, definiți un div cu clasa sens-pagina. Apoi, definiți un element h1 care conține cuvânt variabila cu litere mici:

<divclasă="pagina-sens">
<h1>
 {word.toLowerCase()}
h1>
div>

Apoi, utilizați blocurile de așteptare ale lui Svelte pentru a apela getWordMeaning funcţie:

{#așteaptă promisiune}
<p>Se încarcă...p>
{:then entries}
{:captură}
 {errorMessage}
{/așteaptă}

Acest cod afișează Se încarcă... text când se face cererea GET la API. Dacă există o eroare, va afișa conținutul mesaj de eroare.

În {:then entries} bloc, adăugați următoarele:

{#each entries as entry}
 {#fiecare intrare.sensuri ca semnificație}
<divclasă="intrare">
<divclasă="parte de vorbire">
 {meaning.partOfSpeech}
div>
<ol>
 {#fiecare sens.definiții ca definiție}
<li>
 {definition.definition}
<br />
<divclasă="exemplu">
 {#if definition.example}
 {definition.example}
 {/dacă}
div>
li>
 {/fiecare}
ol>
div>
 {/fiecare}
{/fiecare}

Dacă promisiunea se rezolvă cu succes, intrări variabila conține datele rezultate.

Apoi pentru fiecare iterație a intrare și sens, acest cod redă partea de vorbire folosind sens.partOfSpeech și o listă de definiții folosind definiţie.definiţie. De asemenea, va reda o propoziție exemplu, dacă este disponibilă una.

Asta este. Ați creat un dicționar de aplicație cu o singură pagină (SPA) utilizând rutarea sveltă. Puteți duce lucrurile mai departe, dacă doriți, sau puteți verifica svelt-navigator, o furculiță de svelte-routing.

Îmbunătățirea experienței utilizatorului cu rutare pe partea client

Există multe beneficii în gestionarea rutării în browser în loc de server. Aplicațiile care folosesc rutarea pe partea client pot fi mai fluide pentru utilizatorul final, mai ales atunci când sunt asociate cu animații și tranziții.

Cu toate acestea, dacă doriți ca site-ul dvs. să se claseze mai sus în motoarele de căutare, ar trebui să luați în considerare gestionarea rutelor pe server.