Een inleiding tot routering in Svelte

Svelte is een snelgroeiend webframework waarmee u websites kunt bouwen. Het presenteert zichzelf als een lichtgewicht, gebruiksvriendelijk alternatief voor populaire frameworks zoals React en Vue.

Elk populair JavaScript-framework heeft een bijbehorende bibliotheek die u kunt gebruiken voor routering. Ontdek hoe u met Svelte uw URL's en de code die ze verwerkt, kunt beheren.

Populaire routeringsbibliotheken

De meest populaire routeringsbibliotheek voor React is React Router, gemaakt door het Remix-team. Voor VueJS is er Vue Router die de ontwikkelaar fijne controle geeft over elke navigatie. In de Svelte-wereld is de meest populaire routeringsbibliotheek slanke routering.

De andere belangrijkste routeringsbibliotheek voor Svelte is slanke navigator. Omdat het een vork is van slanke routering, is het handig om eerst meer te weten te komen over die bibliotheek.

Hoe de bibliotheek met slanke routering werkt

Er zijn drie belangrijke componenten voor afhandelingsroutes in Svelte: Router, Koppeling, En Route. Om ze in uw toepassing te gebruiken, kunt u deze hulpprogramma's eenvoudig importeren vanuit de slanke routering bibliotheek.

<script>
importeer {Route, Router, Link} van "svelte-routing";
script>

De routercomponent kan twee optionele rekwisieten hebben: basispad En url. De basispad eigenschap is vergelijkbaar met de basisnaam prop in React Router.

Standaard is deze ingesteld op "/". basepath kan van pas komen als uw toepassing meerdere toegangspunten heeft. Beschouw bijvoorbeeld de volgende Svelte-code:

<script>
 importeer { Route, Router, Link } van "svelte-routing";
 laat basepath = "/gebruiker";
 laat pad = locatie.padnaam;
script>
<Router {basispad}>
<divbij klikken={() => (pad = locatie.padnaam)}>
<Koppelingnaar="/">Ga naar huisKoppeling>
<Koppelingnaar="/gebruiker/david">Log in als DavidKoppeling>
div>
<voornaamst>
 Je bent hier: <code>{pad}code>
<Routepad="/">
<h1>Welkom thuis!h1>
Route>
<Routepad="/David">
<h1>Hallo David!h1>
Route>
voornaamst>
Router>

Als u deze code uitvoert, zult u merken dat wanneer u op de Ga naar huis knop, navigeert de browser naar het basispad "/user". Route definieert de component die moet worden weergegeven als het pad overeenkomt met de waarde in het opgegeven Route prop.

U kunt definiëren welke elementen binnen de component Route moeten worden weergegeven of afzonderlijk .slank zolang u dat bestand correct importeert. Bijvoorbeeld:

<Routepad="/over"bestanddeel={Over}/>

Het bovenstaande codeblok vertelt de browser om het app component wanneer de padnaam "/about" is.

Tijdens gebruik slanke routering, definieer interne links met de Koppeling component in plaats van traditionele HTML A elementen.

Dit is vergelijkbaar met hoe React Router omgaat met interne links; elke Link-component moet een naar prop die de browser vertelt naar welk pad moet worden genavigeerd.

Wanneer de browser een Svelte-component weergeeft, converteert Svelte automatisch alle Link-componenten naar equivalent A elementen, ter vervanging van de naar prop met een href attribuut. Dit betekent dat wanneer u het volgende schrijft:

<Koppelingnaar="/sommige/pad">Dit is een linkcomponent in slanke routeringKoppeling>

Svelte presenteert het aan de browser als:

<Ahref="/sommige/pad">Dit is een linkcomponent in slanke routeringA>

U moet de Link-component gebruiken in plaats van de traditionele A element bij het werken met svelte-routing. Dit is zo omdat A elementen voeren standaard een herlaadbeurt van de pagina uit.

Een SPA creëren met Svelte en Svelte-Routing

Het is tijd om alles wat je hebt geleerd in de praktijk te brengen door een eenvoudige woordenboektoepassing te maken waarmee de gebruiker naar woorden kan zoeken. Dit project maakt gebruik van de gratis Woordenboek-API.

Zorg er om te beginnen voor dat Yarn op uw computer is geïnstalleerd en voer het volgende uit:

garen creëren vite

Dit zal een nieuw project steigeren met behulp van de Vite-bouwtool. Geef uw project een naam en kies vervolgens "Svelte" als het framework en "JavaScript" als de variant. Voer daarna de volgende opdrachten een voor een uit:

CD
garen
garen voeg slank frezen toe
garen ontwikkelaar

Verwijder vervolgens de inhoud van het App.slank bestand en verander de projectstructuur om er zo uit te zien:

In de bovenstaande illustratie kunt u zien dat er een map "components" is met twee bestanden: Home.svelte En Betekenis.slank. Betekenis.slank is het onderdeel dat wordt weergegeven wanneer de gebruiker naar een woord zoekt.

Navigeer naar de App.slank bestand en importeer de Route-, Router- en Link-componenten uit de svelte-routing-bibliotheek. Zorg er ook voor dat u de Home.svelte En App.slank componenten.

<script>
 importeer { Route, Router, Link } van "svelte-routing";
 importeer Home van "./components/Home.svelte";
 import Betekenis van "./components/Meaning.svelte";
script>

Maak vervolgens een Router-component die een voornaamst HTML-element met de klasse "app".

<Router>
<voornaamstklas="app">
voornaamst>
Router>

In de voornaamst element, voeg een toe navigatie element met een Link-component als kind. De "to"-prop van deze Link-component moet verwijzen naar "/". Met dit onderdeel kan de gebruiker naar de startpagina navigeren.

<voornaamstklas="app">
<navigatie>
<Koppelingnaar="/">ThuisKoppeling>
navigatie>
voornaamst>

Het is nu tijd om aan de routes te werken. Wanneer de gebruiker de app laadt, wordt de Thuis component moet renderen.

Navigeren naar "/find/:word" zou het Betekenis bestanddeel. De ":word"-clausule is een padparameter.

Voor dit project hoeft u zich geen zorgen te maken over CSS. Vervang gewoon de inhoud van uw eigen app.css bestand met de inhoud van de app.css bestand van deze GitHub-repository.

Het is nu tijd om de routes te bepalen. Het pad op rootniveau moet de Thuis component, terwijl "/find/:word" de Betekenis bestanddeel.

<Routepad="/"bestanddeel={Thuis} />
<Routepad="/vind/:woord"laat: parameters>
<Betekeniswoord={params.woord} />
Route>

Dit codeblok gebruikt de laten richtlijn om de parameter "word" door te geven aan de Betekenis onderdeel als prop.

Open nu de Home.svelte bestand en importeer het navigeren hulpprogramma uit de bibliotheek "svelte-routing" en definieer een variabele ingevoerdWoord.

<script>
 import { navigeren } van "svelte-routing";
 laat ingevoerdWoord;
script>

Onder de script tag, maak een hoofdelement met de klasse "homepage" en maak vervolgens een div element met de klasse "dictionary-text".

<voornaamstklas="Startpagina">
<divklas="woordenboek-tekst">Woordenboekdiv>
voornaamst>

Maak vervolgens een formulier met een op: indienen richtlijn. Dit formulier moet twee kinderen bevatten: een invoer element waarvan de waarde gebonden is aan de ingevoerdWoord variabele en een verzendknop die voorwaardelijk wordt weergegeven zodra de gebruiker begint te typen:

<formulierop: indienen|voorkom standaard={() => navigeren(`/find/${enteredWord.toLowerCase()}`)}>
<invoer
 typ="tekst"
 binden: waarde={enteredWord}
 placeholder="Begin met zoeken..."
 autofocus
 />
 {#indien ingevoerdWoord}
<knoptype="indienen">Zoek woordknop>
 {/als}
formulier>

Dit codeblok gebruikt de navigeren functie om de gebruiker om te leiden zodra de verzendactie is voltooid. Open nu de Betekenis.slank -bestand en exporteer in de scripttag het woord prop en maak een foutbericht variabele:

export laat woord;
let errorMessage = "Geen verbinding. Controleer uw internet";

Maak vervolgens een GET-verzoek aan de Dictionary API en geef het woord als parameter:

asynchroonfunctiegetWordBetekenis(woord) {
const reactie = wachten ophalen(
` https://api.dictionaryapi.dev/api/v2/entries/en/${woord}`
 );
const json = wachten reactie.json();
troosten.log (json);
als (antwoord.ok) {
opbrengst json;
 } anders {
 errorMessage = json.bericht;
gooiennieuwFout(json);
 }
 }
laten belofte = getWordBetekenis (woord);

In het bovenstaande codeblok retourneert de asynchrone functie de JSON-gegevens als het antwoord succesvol is. De variabele belofte vertegenwoordigt het resultaat van de getWordBetekenis functie wanneer aangeroepen.

Definieer in de opmaak een div met de klasse betekenispagina. Definieer vervolgens een h1-element dat de woord variabele in kleine letters:

<divklas="betekenispagina">
<h1>
 {word.toLowerCase()}
h1>
div>

Gebruik vervolgens Svelte's wachtblokken om de getWordBetekenis functie:

{# wacht op belofte}
<P>Bezig met laden...P>
{:dan vermeldingen}
{:vangst}
 {errorMessage}
{/wachten}

Deze code geeft de Bezig met laden... tekst wanneer het GET-verzoek wordt gedaan naar de API. Als er een fout is, wordt de inhoud van getoond foutbericht.

In de {:dan vermeldingen} blok, voeg het volgende toe:

{#each invoer als invoer}
 {#each entry.meanings als betekenis}
<divklas="invoer">
<divklas="deel-van-spraak">
 {betekenis.partOfSpeech}
div>
<ol>
 {#elke betekenis.definities als definitie}
<li>
 {definitie.definitie}
<br />
<divklas="voorbeeld">
 {#if definitie.voorbeeld}
 {definitie.voorbeeld}
 {/als}
div>
li>
 {/elk}
ol>
div>
 {/elk}
{/elk}

Als de belofte met succes wordt opgelost, zal de inzendingen variabele bevat de resulterende gegevens.

Dan voor elke iteratie van binnenkomst En betekenis, geeft deze code de woordsoort weer met behulp van betekenis.partOfSpeech en een lijst met definities die gebruikmaken van definitie.definitie. Het zal ook een voorbeeldzin weergeven, als die beschikbaar is.

Dat is het. U hebt een woordenboek Single Page Application (SPA) gemaakt met behulp van svelte-routing. Je kunt verder gaan als je wilt, of je kunt uitchecken slanke navigator, een vork van slanke routering.

Gebruikerservaring verbeteren met client-side routering

Er zijn veel voordelen aan het afhandelen van routering in de browser in plaats van op de server. Applicaties die gebruik maken van routering aan de clientzijde kunnen voor de eindgebruiker soepeler aanvoelen, vooral in combinatie met animaties en overgangen.

Als u echter wilt dat uw website hoger scoort in zoekmachines, moet u overwegen om routes op de server af te handelen.