Johdatus reitittämiseen Sveltessä

Svelte on nopeasti kasvava verkkokehys, jonka avulla voit rakentaa verkkosivustoja. Se esittelee itsensä kevyenä, helppokäyttöisenä vaihtoehtona suosituille kehyksille, kuten React ja Vue.

Jokaisella suositulla JavaScript-kehyksellä on parikirjasto, jota voit käyttää reitittämiseen. Tutustu miten Svelte antaa sinun hallita URL-osoitteitasi ja niitä käsittelevää koodia.

Suositut reitityskirjastot

Reactin suosituin reitityskirjasto on React Router, jonka on luonut Remix-tiimi. VueJS: ssä on Vue Router, joka antaa kehittäjälle hienon hallinnan mitä tahansa navigointia varten. Svelte-maailmassa suosituin reitityskirjasto on hoikka reititys.

Toinen Svelten pääreitityskirjasto on hoikka-navigaattori. Koska se on haarukka hoikka reititys, on hyödyllistä tutustua kyseiseen kirjastoon ensin.

Kuinka hoikka reitityskirjasto toimii

Reittien käsittelyssä Sveltessä on kolme tärkeää osaa:

Reititin, Linkki, ja Reitti. Voit käyttää niitä sovelluksessasi tuomalla nämä apuohjelmat sovelluksesta hoikka reititys kirjasto.

<käsikirjoitus>
tuo {Route, Router, Link} "svelte-routingista";
käsikirjoitus>

Reititinkomponentissa voi olla kaksi valinnaista tukia: peruspolku ja url. The peruspolku ominaisuus on samanlainen kuin perusnimi tuki React Routerissa.

Oletuksena se on "/". basepath voi olla hyödyllinen, jos sovelluksessasi on useita aloituspisteitä. Harkitse esimerkiksi seuraavaa Svelte-koodia:

<käsikirjoitus>
 tuo { Route, Router, Link } "svelte-routingista";
 anna basepath = "/käyttäjä";
 anna polku = sijainti.polunnimi;
käsikirjoitus>
<Reititin {peruspolku}>
<divklikkaamalla={() => (polku = sijainti.polkunimi)}>
<Linkkito="/">Mene kotiinLinkki>
<Linkkito="/käyttäjä/daavid">Kirjaudu sisään nimellä DavidLinkki>
div>
<pää>
 Sinä olet täällä: <koodi>{polku}koodi>
<Reittipolku="/">
<h1>Tervetuloa kotiin!h1>
Reitti>
<Reittipolku="/david">
<h1>Hei David!h1>
Reitti>
pää>
Reititin>

Jos suoritat tämän koodin, huomaat, että napsautat Mene kotiin -painiketta, selain siirtyy peruspolulle "/user". Reitti määrittelee komponentin, joka hahmonnetaan, jos polku vastaa määritetyn arvon arvoa Reitti prop.

Voit määrittää, mitkä elementit renderöidään Reitti-komponentin sisällä tai erillisinä .hoikka tiedostoa, kunhan tuot tiedoston oikein. Esimerkiksi:

<Reittipolku="/noin"komponentti={Noin}/>

Yllä oleva koodilohko kehottaa selainta hahmontamaan Sovellus komponentti, kun polun nimi on "/about".

Käytettäessä hoikka reititys, määritä sisäiset linkit Linkki komponentti perinteisen HTML: n sijaan a elementtejä.

Tämä on samanlainen kuin React Router käsittelee sisäisiä linkkejä; jokaisessa linkkikomponentissa tulee olla a to prop, joka kertoo selaimelle, mihin polkuun tulee navigoida.

Kun selain tekee Svelte-komponentin, Svelte muuntaa automaattisesti kaikki Link-komponentit vastaaviksi a elementtejä, korvaamalla to prop kanssa href attribuutti. Tämä tarkoittaa, että kun kirjoitat seuraavan:

<Linkkito="/joku/polku">Tämä on Svelte-reitityksen linkkikomponenttiLinkki>

Svelte esittelee sen selaimelle seuraavasti:

<ahref="/joku/polku">Tämä on Svelte-reitityksen linkkikomponenttia>

Sinun tulisi käyttää Link-komponenttia perinteisen sijaan a elementti työskennellessäsi viistoreitityksen kanssa. Tämä johtuu siitä, että a elementit suorittavat sivun uudelleenlatauksen oletusarvoisesti.

SPA: n luominen Svelten ja Svelte-Routingin avulla

On aika laittaa kaikki oppimasi käytäntöön luomalla yksinkertainen sanakirjasovellus, jonka avulla käyttäjä voi etsiä sanoja. Tämä projekti käyttää ilmaista Sanakirjan API.

Aloita varmistamalla, että Yarn on asennettu koneellesi ja suorita:

lanka luo vite

Tämä rakentaa uuden projektin käyttämällä Vite-rakennustyökalu. Nimeä projekti ja valitse "Svelte" viitekehykseksi ja "JavaScript" variantiksi. Suorita sen jälkeen seuraavat komennot peräkkäin:

CD
lanka
lanka lisää ohutta reititystä
lanka dev

Poista seuraavaksi tiedoston sisältö App.svelte tiedosto ja muuta projektin rakenne tältä:

Yllä olevasta kuvasta näet, että siellä on "komponentit"-kansio, jossa on kaksi tiedostoa: Home.svelte ja Merkitys.hohkea. Merkitys.hohkea on komponentti, joka hahmonnetaan, kun käyttäjä etsii sanaa.

Navigoi kohtaan App.svelte tiedosto ja tuo Route-, Router- ja Link -komponentit svelte-routing-kirjastosta. Muista myös tuoda Home.svelte ja App.svelte komponentit.

<käsikirjoitus>
 tuo { Route, Router, Link } "svelte-routingista";
 tuo Home osoitteesta "./components/Home.svelte";
 tuonti Merkitys osoitteesta "./components/Meaning.svelte";
käsikirjoitus>

Luo seuraavaksi reititinkomponentti, joka kääri a pää HTML-elementti, jonka luokka on "app".

<Reititin>
<pääluokkaa="sovellus">
pää>
Reititin>

Vuonna pää elementti, lisää a nav elementti, jonka aliosa on Link-komponentti. Tämän linkkikomponentin "to"-propanin tulee osoittaa "/". Tämän komponentin avulla käyttäjä voi navigoida etusivulle.

<pääluokkaa="sovellus">
<nav>
<Linkkito="/">KotiLinkki>
nav>
pää>

Nyt on aika työstää reittejä. Kun käyttäjä lataa sovelluksen, Koti komponentin pitäisi renderöidä.

Navigoinnin "/find/:word" -kohtaan pitäisi näyttää Merkitys komponentti. ":word"-lause on polkuparametri.

Tässä projektissa sinun ei tarvitse huolehtia CSS: stä. Vaihda vain oma sisältösi app.css tiedoston sisällön kanssa app.css tiedosto osoitteesta tämä GitHub-arkisto.

Nyt on aika määritellä reitit. Päätason polun tulee tehdä Koti komponentti, kun taas "/find/:word" pitäisi tehdä Merkitys komponentti.

<Reittipolku="/"komponentti={Koti} />
<Reittipolku="/etsi/:sana"anna: params>
<Merkityssana={params.word} />
Reitti>

Tämä koodilohko käyttää antaa käsky siirtää "word"-parametri alas Merkitys komponentti rekvisiittana.

Avaa nyt Home.svelte tiedosto ja tuo navigoida apuohjelma "svelte-routing"-kirjastosta ja määritä muuttuja tuli Wordiin.

<käsikirjoitus>
 tuonti { navigoi } "svelte-routingista";
 anna enterWord;
käsikirjoitus>

Alla käsikirjoitus -tunniste, luo pääelementti luokalla "kotisivu" ja luo sitten a div elementti, jonka luokka on "sanakirja-teksti".

<pääluokkaa="kotisivu">
<divluokkaa="sanakirja-teksti">Sanakirjadiv>
pää>

Luo seuraavaksi lomake, jossa on an on: lähetä direktiivi. Tässä lomakkeessa tulee olla kaksi lasta: an syöttö elementti, jonka arvo on sidottu tuli Wordiin muuttuja ja lähetyspainike, joka näytetään ehdollisesti heti, kun käyttäjä alkaa kirjoittaa:

<muodossaon: lähetä|estääDefault={() => navigate(`/find/${enteredWord.toLowerCase()}`)}>
<syöttö
 type="teksti"
 bind: value={enteredWord}
 placeholder="Aloita haku..."
 automaattitarkennus
 />
 {#jos syötettyWord}
<-painikettatyyppi="Lähetä">Hae sanaa-painiketta>
 {/jos}
muodossa>

Tämä koodilohko käyttää navigoida toiminto, joka ohjaa käyttäjän uudelleen lähetystoiminnon päätyttyä. Avaa nyt Merkitys.hohkea tiedosto ja vie skriptitunnisteeseen sana tuki ja luo an virheviesti muuttuja:

vienti anna sana;
let errorMessage = "Ei yhteyttä. Tarkista Internet";

Tee seuraavaksi GET-pyyntö Dictionary API: lle, joka välittää sana parametrina:

asynktoimintogetWordMeaning(sana) {
konst vastaus = odottaa hae(
` https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
 );
konst json = odottaa vastaus.json();
konsoli.log (json);
jos (response.ok) {
palata json;
 } muu {
 errorMessage = json.message;
heittääUusiVirhe(json);
 }
 }
antaa lupaus = getWordMeaning (sana);

Yllä olevassa koodilohkossa asynkroninen funktio palauttaa JSON-tiedot, jos vastaus on onnistunut. Lupausmuuttuja edustaa tulosta getWordMeaning toiminto, kun sitä kutsutaan.

Määritä merkinnöissä div luokan kanssa merkitys-sivu. Määritä seuraavaksi h1-elementti, joka sisältää sana muuttuja pienillä kirjaimilla:

<divluokkaa="merkityssivu">
<h1>
 {word.toLowerCase()}
h1>
div>

Käytä seuraavaksi Svelten odotuslohkoja soittaaksesi getWordMeaning toiminto:

{# odota lupausta}
<s>Ladataan...s>
{:niin merkinnät}
{:ottaa kiinni}
 {virheviesti}
{/odottaa}

Tämä koodi näyttää Ladataan... teksti kun GET-pyyntö tehdään API: lle. Jos tapahtuu virhe, se näyttää sisällön virheviesti.

Vuonna {:niin merkinnät} lohko, lisää seuraava:

{#each entries as entry}
 {#each entry.meanings merkityksenä}
<divluokkaa="sisääntulo">
<divluokkaa="osa puhetta">
 {meaning.partOfSpeech}
div>
<ol>
 {#jokainen merkitys.määritykset määritelmänä}
<li>
 {definition.definition}
<br />
<divluokkaa="esimerkki">
 {#if määritelmä.esimerkki}
 {definition.example}
 {/jos}
div>
li>
 {/jokainen}
ol>
div>
 {/jokainen}
{/jokainen}

Jos lupaus toteutuu onnistuneesti, merkinnät muuttuja sisältää tuloksena olevat tiedot.

Sitten jokaiselle iteraatiolle sisääntulo ja merkitys, tämä koodi tekee puheosan käyttämällä merkitys.Puheen osa ja luettelo määritelmistä käyttäen määritelmä.määritelmä. Se myös hahmontaa esimerkkilauseen, jos sellainen on saatavilla.

Se siitä. Olet luonut sanakirjan Single Page Application (SPA) käyttämällä svelte-reititystä. Voit viedä asioita pidemmälle, jos haluat, tai voit tarkistaa hoikka-navigaattori, haarukka hoikka reititys.

Käyttäjäkokemuksen parantaminen asiakaspuolen reitityksellä

Reitityksen käsittelyssä selaimessa palvelimen sijaan on monia etuja. Asiakaspuolen reititystä käyttävät sovellukset voivat tuntua loppukäyttäjälle sujuvammilta, varsinkin kun ne yhdistetään animaatioiden ja siirtymien kanssa.

Jos kuitenkin haluat verkkosivustosi sijoittuvan korkeammalle hakukoneissa, sinun tulee harkita reittien käsittelyä palvelimella.