En introduktion til ruteføring i Svelte

Svelte er et hurtigt voksende web-framework, du kan bruge til at bygge hjemmesider. Det præsenterer sig selv som et let, brugervenligt alternativ til populære rammer som React og Vue.

Hver populær JavaScript-ramme har et ledsagende bibliotek, som du kan bruge til routing. Opdag, hvordan Svelte lader dig administrere dine URL'er og koden, der håndterer dem.

Populære routingbiblioteker

Det mest populære routingbibliotek for React er React Router, skabt af Remix-teamet. Til VueJS er der Vue Router, som giver udvikleren fin kontrol over enhver navigation. I Svelte-verdenen er det mest populære routingbibliotek svelte-routing.

Det andet hovedrutebibliotek for Svelte er svelte-navigator. Da det er en gaffel af svelte-routing, er det nyttigt at lære om det bibliotek først.

Hvordan det svelte-routing-bibliotek fungerer

Der er tre vigtige komponenter til håndtering af ruter i Svelte:

Router, Link, og Rute. For at bruge dem i din applikation kan du blot importere disse hjælpeprogrammer fra svelte-routing bibliotek.

<manuskript>
importere {Route, Router, Link} fra "svelte-routing";
manuskript>

Router-komponenten kan have to valgfri rekvisitter: basissti og url. Det basissti ejendom ligner basenavn prop i React Router.

Som standard er den indstillet til "/". basepath kan være praktisk, hvis din applikation har flere indgangspunkter. Overvej for eksempel følgende Svelte-kode:

<manuskript>
 importer { Route, Router, Link } fra "svelte-routing";
 lad basepath = "/bruger";
 lad sti = sted.stinavn;
manuskript>
<Router {basissti}>
<divpå: klik={() => (sti = sted.stinavn)}>
<Linktil="/">Gå hjemLink>
<Linktil="/bruger/david">Log ind som DavidLink>
div>
<vigtigste>
 Du er her: <kode>{sti}kode>
<Rutesti="/">
<h1>Velkommen hjem!h1>
Rute>
<Rutesti="/david">
<h1>Hej David!h1>
Rute>
vigtigste>
Router>

Hvis du kører denne kode, vil du bemærke, at når du klikker på Gå hjem knappen, navigerer browseren til basisstien "/bruger". Rute definerer den komponent, der skal gengives, hvis stien matcher værdien i den angivne Rute rekvisit.

Du kan definere, hvilke elementer der skal gengives inde i rutekomponenten eller som en separat .svelte fil, så længe du importerer filen korrekt. For eksempel:

<Rutesti="/om"komponent={Om}/>

Kodeblokken ovenfor fortæller browseren at gengive App komponent, når stinavnet er "/about".

Ved brug svelte-routing, definere interne links med Link komponent i stedet for traditionel HTML -en elementer.

Dette svarer til hvordan React Router håndterer interne links; hver Link-komponent skal have en til prop, der fortæller browseren, hvilken sti den skal navigere til.

Når browseren gengiver en Svelte-komponent, konverterer Svelte automatisk alle Link-komponenter til tilsvarende -en elementer, der erstatter til rekvisit med en href attribut. Det betyder, at når du skriver følgende:

<Linktil="/noget/sti">Dette er en Link-komponent i svelte-routingLink>

Svelte præsenterer det for browseren som:

<-enhref="/noget/sti">Dette er en Link-komponent i svelte-routing-en>

Du bør bruge Link-komponenten i stedet for den traditionelle -en element, når der arbejdes med svelte-routing. Dette er fordi -en elementer udfører en sidegenindlæsning som standard.

Oprettelse af et SPA med Svelte og Svelte-Routing

Det er tid til at omsætte alt, hvad du har lært, i praksis ved at skabe et simpelt ordbogsprogram, der giver brugeren mulighed for at søge efter ord. Dette projekt vil bruge den gratis Ordbog API.

For at komme i gang skal du sørge for at have Garn installeret på din maskine og køre:

garn skabe vite

Dette vil stilladsere et nyt projekt ved hjælp af Vite byggeværktøjet. Navngiv dit projekt og vælg derefter "Svelte" som rammen og "JavaScript" som varianten. Kør derefter følgende kommandoer efter hinanden:

cd
garn
garn tilføje svelte-routing
garn dev

Derefter skal du slette indholdet af App.svelte fil og ændre projektstrukturen til at se sådan ud:

Fra illustrationen ovenfor kan du se, at der er en "komponenter"-mappe med to filer: Hjem.svelte og Betydning.svelte. Betydning.svelte er den komponent, der gengives, når brugeren søger efter et ord.

Naviger til App.svelte fil og importer rute-, router- og link-komponenterne fra svelte-routing-biblioteket. Sørg også for at importere Hjem.svelte og App.svelte komponenter.

<manuskript>
 importer { Route, Router, Link } fra "svelte-routing";
 importer Hjem fra "./components/Home.svelte";
 import Betydning fra "./components/Meaning.svelte";
manuskript>

Opret derefter en routerkomponent, der omslutter en vigtigste HTML-element med klassen "app".

<Router>
<vigtigsteklasse="app">
vigtigste>
Router>

I vigtigste element, tilføje en nav element med en Link-komponent som underordnet. Denne Link-komponents "til"-prop skal pege på "/". Denne komponent giver brugeren mulighed for at navigere til hjemmesiden.

<vigtigsteklasse="app">
<nav>
<Linktil="/">HjemLink>
nav>
vigtigste>

Det er nu tid til at arbejde på ruterne. Når brugeren indlæser appen, Hjem komponent skal gengives.

Navigering til "/find/:word" skulle gengive Betyder komponent. ":word"-sætningen er en stiparameter.

Til dette projekt behøver du ikke bekymre dig om CSS. Du skal blot udskifte dit eget indhold app.css fil med indholdet af app.css fil fra dette GitHub-lager.

Det er nu tid til at definere ruterne. Rodniveaustien skal gengive Hjem komponent, mens "/find/:ord" skal gengive Betyder komponent.

<Rutesti="/"komponent={Hjem} />
<Rutesti="/find/:ord"lad: params>
<Betyderord={params.word} />
Rute>

Denne kodeblok bruger lade direktiv om at videregive "word"-parameteren til Betyder komponent som en rekvisit.

Åbn nu Hjem.svelte fil og importer navigere værktøj fra "svelte-routing"-biblioteket og definere en variabel indtastetWord.

<manuskript>
 import { naviger } fra "svelte-routing";
 lad indtastetWord;
manuskript>

Under manuskript tag, opret et hovedelement med klassen "hjemmeside", og opret derefter en div element med klassen "ordbog-tekst".

<vigtigsteklasse="hjemmeside">
<divklasse="ordbog-tekst">Ordbogdiv>
vigtigste>

Opret derefter en formular med en på: indsende direktiv. Denne formular skal indeholde to børn: en input element, hvis værdi er bundet til indtastetWord variabel og en indsend-knap, der gengives betinget, så snart brugeren begynder at skrive:

<formpå: indsende|forhindreStandard={() => navigate(`/find/${enteredWord.toLowerCase()}`)}>
<input
 type="tekst"
 bind: værdi={enteredWord}
 placeholder="Begynd din søgning..."
 autofokus
 />
 {#if enteredWord}
<knaptype="Indsend">Søg i Wordknap>
 {/hvis}
form>

Denne kodeblok bruger navigere funktion til at omdirigere brugeren, når indsendelseshandlingen er afsluttet. Åbn nu Betydning.svelte fil og eksporter i script-tagget ord støtte og skabe en fejl besked variabel:

eksport lad ord;
let errorMessage = "Ingen forbindelse. Tjek dit internet";

Derefter skal du lave en GET-anmodning til Dictionary API'et ved at sende ord som parameter:

asynkronfungeregetWordMeaning(ord) {
konst svar = vente hente(
` https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
 );
konst json = vente response.json();
konsol.log (json);
hvis (respons.ok) {
Vend tilbage json;
 } andet {
 errorMessage = json.message;
kastenyFejl(json);
 }
 }
lade løfte = getWordMeaning (ord);

I kodeblokken ovenfor returnerer den asynkrone funktion de JSON-data, hvis svaret lykkes. Løftevariablen repræsenterer resultatet af getWordMeaning funktion, når den aktiveres.

I markeringen skal du definere en div med klassen mening-side. Dernæst skal du definere et h1-element, der indeholder ord variabel med små bogstaver:

<divklasse="meningsside">
<h1>
 {word.toLowerCase()}
h1>
div>

Brug derefter Sveltes afvent-blokke til at kalde getWordMeaning fungere:

{#afvente løfte}
<s>Indlæser...s>
{:then entries}
{:fangst}
 {fejl besked}
{/vente}

Denne kode viser Indlæser... tekst hvornår GET-anmodningen er lavet til API. Hvis der er en fejl, vil den vise indholdet af fejl besked.

I {:then entries} blok, tilføje følgende:

{#each entries as entry}
 {#each entry.meanings as meaning}
<divklasse="indgang">
<divklasse="del af tale">
 {meaning.partOfSpeech}
div>
<ol>
 {#each meaning.definitions as definition}
<li>
 {definition.definition}
<br />
<divklasse="eksempel">
 {#if definition.example}
 {definition.example}
 {/hvis}
div>
li>
 {/hver}
ol>
div>
 {/hver}
{/hver}

Hvis løftet løses med succes, vil poster variabel indeholder de resulterende data.

Derefter for hver iteration af indgang og betyder, gengiver denne kode den del af tale, der bruger betydning.taledel og en liste over definitioner, der bruger definition.definition. Det vil også gengive en eksempelsætning, hvis en sådan er tilgængelig.

Det er det. Du har oprettet en ordbog Single Page Application (SPA) ved hjælp af svelte-routing. Du kan tage tingene videre, hvis du vil, eller du kan tjekke ud svelte-navigator, en gaffel af svelte-routing.

Forbedring af brugeroplevelsen med ruting på klientsiden

Der er mange fordele ved at håndtere routing i browseren i stedet for serveren. Applikationer, der gør brug af routing på klientsiden, kan føles glattere for slutbrugeren, især når de er parret med animationer og overgange.

Men hvis du vil have din hjemmeside til at rangere højere i søgemaskinerne, bør du overveje at håndtere ruter på serveren.