Sissejuhatus marsruutimisse Sveltes

Svelte on kiiresti kasvav veebiraamistik, mida saate kasutada veebisaitide koostamiseks. See on kerge ja hõlpsasti kasutatav alternatiiv populaarsetele raamistikele nagu React ja Vue.

Igal populaarsel JavaScripti raamistikul on kaasteek, mida saate marsruutimiseks kasutada. Avastage, kuidas Svelte võimaldab teil hallata oma URL-e ja neid käsitlevat koodi.

Populaarsed marsruutimisteegid

Reacti kõige populaarsem marsruutimisteek on React Router, mille on loonud Remix meeskond. VueJS-i jaoks on olemas Vue Router, mis annab arendajale täpse kontrolli mis tahes navigeerimise üle. Svelte maailmas on kõige populaarsem marsruutimisteek sihvakas suunamine.

Teine Svelte peamine marsruutimisteek on sihvakas-navigaator. Kuna see on kahvel sihvakas suunamine, on kasulik esmalt selle teegiga tutvuda.

Kuidas sujuvalt marsruutimise raamatukogu töötab

Sveltes marsruutide haldamiseks on kolm olulist komponenti:

Ruuter, Linkja Tee. Nende kasutamiseks oma rakenduses saate need utiliidid lihtsalt rakendusest importida sihvakas suunamine raamatukogu.

<stsenaarium>
importida {Route, Router, Link} jaotisest "svelte-routing";
stsenaarium>

Ruuteri komponendil võib olla kaks valikulist tugiseadet: baasrada ja url. The baasrada vara on sarnane baasnimi rekvisiit React Routeris.

Vaikimisi on see "/". basepath võib olla kasulik, kui teie rakendusel on mitu sisenemispunkti. Näiteks kaaluge järgmist Svelte koodi:

<stsenaarium>
 import { Route, Router, Link } from "svelte-routing";
 let basepath = "/kasutaja";
 let path = asukoht.teenimi;
stsenaarium>
<Ruuter {baasrada}>
<divsisse: klõpsake={() => (tee = asukoht.teenimi)}>
<Linkjuurde="/">Mine kojuLink>
<Linkjuurde="/kasutaja/taavi">Logi sisse kui DavidLink>
div>
<peamine>
 Sa oled siin: <kood>{path}kood>
<Teetee="/">
<h1>Tere tulemast koju!h1>
Tee>
<Teetee="/david">
<h1>Tere David!h1>
Tee>
peamine>
Ruuter>

Kui käivitate selle koodi, märkate, et kui klõpsate Mine koju nuppu, navigeerib brauser baasteele "/user". Marsruut määrab komponendi, mis peaks renderdama, kui tee ühtib määratud väärtusega Tee prop.

Saate määrata, milliseid elemente renderdada komponendi Marsruudi sees või eraldi .sihvakas seni, kuni impordite selle faili õigesti. Näiteks:

<Teetee="/umbes"komponent={About}/>

Ülaltoodud koodiplokk käsib brauseril renderdada Rakendus komponent, kui tee nimi on "/about".

Kasutamisel sihvakas suunamine, määratlege sisemised lingid rakendusega Link traditsioonilise HTML-i asemel a elemendid.

See sarnaneb sellega, kuidas React Router siselinke käsitleb; igal lingi komponendil peaks olema a juurde prop, mis ütleb brauserile, millisele teele navigeerida.

Kui brauser renderdab Svelte'i komponendi, teisendab Svelte automaatselt kõik lingi komponendid samaväärseteks a elemendid, asendades juurde prop koos an href atribuut. See tähendab, et kui kirjutate järgmise:

<Linkjuurde="/mingi/tee">See on Svelte-marsruutimise lingikomponentLink>

Svelte esitab selle brauserile järgmiselt:

<ahref="/mingi/tee">See on Svelte-marsruutimise lingikomponenta>

Traditsioonilise asemel peaksite kasutama linki komponenti a element kaldmarsruutimisega töötamisel. See on sellepärast, et a elemendid laadivad vaikimisi lehe uuesti.

SPA loomine Svelte'i ja Svelte-Routinguga

On aeg kõike õpitut praktikas rakendada, luues lihtsa sõnastikurakenduse, mis võimaldab kasutajal sõnu otsida. See projekt kasutab tasuta Sõnastiku API.

Alustamiseks veenduge, et teie masinasse oleks installitud Yarn ja käivitage:

lõng luua vite

See loob uue projekti kasutades Vite ehitustööriist. Nimetage oma projekti, seejärel valige raamistikuks "Svelte" ja variandiks "JavaScript". Pärast seda käivitage üksteise järel järgmised käsud:

cd
lõng
lõng lisada peenike-suunamist
lõng dev

Järgmisena kustutage faili sisu App.svelte faili ja muutke projekti struktuur selliseks:

Ülaltoodud jooniselt näete, et seal on kahe failiga kaust "komponendid". Kodu.sihvakas ja Tähendus.sihvakas. Tähendus.sihvakas on komponent, mis renderdatakse, kui kasutaja otsib sõna.

Navigeerige lehele App.svelte faili ja importige komponendid Route, Router ja Link Svelte-marsruutimise teegist. Importige kindlasti ka Kodu.sihvakas ja App.svelte komponendid.

<stsenaarium>
 import { Route, Router, Link } from "svelte-routing";
 importida kodulehest "./components/Home.svelte";
 importida tähendus failist "./components/Meaning.svelte";
stsenaarium>

Järgmisena looge ruuteri komponent, mis ümbritseb a peamine HTML-element klassiga "app".

<Ruuter>
<peamineklass="rakendus">
peamine>
Ruuter>

Aastal peamine element, lisage a nav element, mille alamkomponent on Link. Selle lingi komponendi "to" rekvisiit peaks osutama märgile "/". See komponent võimaldab kasutajal avalehele navigeerida.

<peamineklass="rakendus">
<nav>
<Linkjuurde="/">KoduLink>
nav>
peamine>

Nüüd on aeg marsruutide kallal tööd teha. Kui kasutaja rakenduse laadib, kuvatakse Kodu komponent peaks renderdama.

Valikule "/find/:word" navigeerimine peaks renderdama Tähendus komponent. Klausel ":word" on tee parameeter.

Selle projekti puhul ei pea te CSS-i pärast muretsema. Asendage lihtsalt enda sisu app.css faili sisuga app.css failist see GitHubi hoidla.

Nüüd on aeg määrata marsruudid. Juuretasandi tee peaks renderdama Kodu komponent, samas kui "/find/:word" peaks renderdama Tähendus komponent.

<Teetee="/"komponent={Kodu} />
<Teetee="/leida/:sõna"olgu: params>
<Tähendussõna={params.word} />
Tee>

See koodiplokk kasutab lase käsk, et edastada parameeter "word" alla Tähendus komponent nagu rekvisiit.

Nüüd avage Kodu.sihvakas faili ja importige navigeerida utiliit "svelte-routing" teegist ja määratlege muutuja sisestatudWord.

<stsenaarium>
 import { navigate } from "svelte-routing";
 lase sisestadaWord;
stsenaarium>

all stsenaarium tag, loo põhielement klassiga "koduleht", seejärel loo a div element klassiga "sõnastik-tekst".

<peamineklass="koduleht">
<divklass="sõnastik-tekst">Sõnastikdiv>
peamine>

Järgmisena looge vorm, kasutades an kohta: esitama direktiiv. See vorm peaks sisaldama kahte last: an sisend element, mille väärtus on seotud sisestatudWord muutuja ja esitamisnupp, mis renderdatakse tingimuslikult kohe, kui kasutaja hakkab tippima:

<vormikohta: esitama|preventDefault={() => navigate(`/find/${enteredWord.toLowerCase()}`)}>
<sisend
 type="text"
 bind: value={enteredWord}
 placeholder="Alusta otsingut..."
 autofookus
 />
 {#if sisestatudWord}
<nupputüüp="Esita">Otsige sõnanuppu>
 {/if}
vormi>

See koodiplokk kasutab navigeerida funktsioon kasutaja ümbersuunamiseks, kui esitamistoiming on lõppenud. Nüüd avage Tähendus.sihvakas faili ja eksportige skriptimärgendisse sõna toetada ja luua an veateade muutuja:

eksport lase sõna;
let errorMessage = "Ühendus puudub. Kontrollige oma internetti";

Järgmisena esitage sõnastiku API-le GET-i taotlus, edastades selle sõna parameetrina:

asünkrfunktsioonigetWordMeaning(sõna) {
konst vastus = ootama tõmba(
` https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
 );
konst json = ootama vastus.json();
konsool.log (json);
kui (response.ok) {
tagasi json;
 } muidu {
 errorMessage = json.message;
viskamauusViga(json);
 }
 }
lase lubadus = getWordMeaning (sõna);

Ülaltoodud koodiplokis tagastab asünkroonne funktsioon JSON-andmed, kui vastus on edukas. Lubatud muutuja esindab tulemust getWordMeaning funktsiooni käivitamisel.

Määrake märgistuses klassiga div tähendus-leht. Järgmisena määratlege element h1, mis sisaldab sõna muutuja väiketähtedega:

<divklass="tähendusleht">
<h1>
 {word.toLowerCase()}
h1>
div>

Järgmisena kasutage Svelte ooteplokke, et helistada getWordMeaning funktsioon:

{#oota lubadust}
<lk>Laadimine...lk>
{:siis kirjed}
{:catch}
 {errorMessage}
{/oot}

See kood kuvab Laadimine... tekst millal esitatakse GET-i taotlus API-le. Kui ilmneb viga, kuvatakse selle sisu veateade.

Aastal {:siis kirjed} blokki, lisage järgmine:

{#each entries as entry}
 {#iga kirje.tähendused tähendusena}
<divklass="sissepääs">
<divklass="kõne osa">
 {meaning.partOfSpeech}
div>
<ol>
 {#iga tähendus.definitsioonid määratlusena}
<li>
 {definition.definition}
<br />
<divklass="näide">
 {#if definition.example}
 {definition.example}
 {/if}
div>
li>
 {/iga}
ol>
div>
 {/iga}
{/iga}

Kui lubadus laheneb edukalt, sissekanded muutuja sisaldab saadud andmeid.

Seejärel iga iteratsiooni kohta sisenemine ja tähenduses, renderdab see kood kõneosa kasutades tähendus.Kõneosa ja määratluste loend, mis kasutavad määratlus.definitsioon. Samuti renderdab see näitelause, kui see on saadaval.

See on kõik. Olete loonud sõnastiku ühe lehekülje rakenduse (SPA), kasutades svelte-routingut. Soovi korral saate asju edasi viia või saate kontrollida sihvakas-navigaator, kahvel sihvakas suunamine.

Kasutajakogemuse parandamine kliendipoolse marsruutimisega

Marsruutimise haldamisel serveri asemel brauseris on palju eeliseid. Kliendipoolset marsruutimist kasutavad rakendused võivad lõppkasutajale tunduda sujuvamad, eriti kui need on seotud animatsioonide ja üleminekutega.

Kui aga soovite, et teie veebisait oleks otsingumootorites kõrgemal kohal, peaksite kaaluma marsruutide haldamist serveris.