Eine Einführung in das Routing in Svelte

Svelte ist ein schnell wachsendes Web-Framework, mit dem Sie Websites erstellen können. Es präsentiert sich als leichte, benutzerfreundliche Alternative zu beliebten Frameworks wie React und Vue.

Jedes gängige JavaScript-Framework verfügt über eine Begleitbibliothek, die Sie für das Routing verwenden können. Entdecken Sie, wie Sie mit Svelte Ihre URLs und den Code, der sie verarbeitet, verwalten können.

Beliebte Routing-Bibliotheken

Die beliebteste Routing-Bibliothek für React ist React Router, erstellt vom Remix-Team. Für VueJS gibt es den Vue Router, der dem Entwickler eine genaue Kontrolle über die Navigation gibt. In der Svelte-Welt ist die beliebteste Routing-Bibliothek schlankes Routing.

Die andere Hauptrouting-Bibliothek für Svelte ist schlanker Navigator. Da es eine Abzweigung von ist schlankes Routing, ist es hilfreich, sich zuerst mit dieser Bibliothek vertraut zu machen.

So funktioniert die Svelte-Routing-Bibliothek

Für die Routenbewältigung in Svelte gibt es drei wichtige Komponenten: Router, Verknüpfung, Und Route. Um sie in Ihrer Anwendung zu verwenden, können Sie diese Dienstprogramme einfach aus importieren schlankes Routing Bibliothek.

<Skript>
{Route, Router, Link} aus „svelte-routing“ importieren;
Skript>

Die Router-Komponente kann zwei optionale Requisiten haben: Basispfad Und URL. Der Basispfad Die Eigenschaft ähnelt der Basisname prop im React Router.

Standardmäßig ist es auf „/“ eingestellt. basepath kann nützlich sein, wenn Ihre Anwendung über mehrere Einstiegspunkte verfügt. Betrachten Sie beispielsweise den folgenden Svelte-Code:

<Skript>
 import { Route, Router, Link } aus „svelte-routing“;
 let basepath = "/user";
 let path = location.pathname;
Skript>
<Router {Basispfad}>
<divauf: klicken={() => (Pfad = Standort.Pfadname)}>
<VerknüpfungZu="/">Zur StartseiteVerknüpfung>
<VerknüpfungZu=„/user/david“>Melden Sie sich als David anVerknüpfung>
div>
<hauptsächlich>
 Sie sind hier: <Code>{Weg}Code>
<RouteWeg="/">
<h1>Willkommen zuhause!h1>
Route>
<RouteWeg="/David">
<h1>Hallo David!h1>
Route>
hauptsächlich>
Router>

Wenn Sie diesen Code ausführen, werden Sie dies bemerken, wenn Sie auf klicken Zur Startseite Wenn Sie auf die Schaltfläche klicken, navigiert der Browser zum Basispfad „/user“. Route definiert die Komponente, die gerendert werden soll, wenn der Pfad mit dem angegebenen Wert übereinstimmt Route Stütze.

Sie können definieren, welche Elemente innerhalb der Route-Komponente oder als separate Komponente gerendert werden sollen .schlank Datei, solange Sie diese Datei ordnungsgemäß importieren. Zum Beispiel:

<RouteWeg="/um"Komponente={Um}/>

Der obige Codeblock weist den Browser an, das zu rendern App Komponente, wenn der Pfadname „/about“ ist.

Beim Benutzen schlankes Routing, interne Links mit dem definieren Verknüpfung Komponente anstelle von herkömmlichem HTML A Elemente.

Dies ähnelt der Art und Weise, wie React Router mit internen Links umgeht. Jede Link-Komponente sollte eine haben Zu Requisite, die dem Browser mitteilt, zu welchem ​​Pfad er navigieren soll.

Wenn der Browser eine Svelte-Komponente rendert, konvertiert Svelte automatisch alle Link-Komponenten in entsprechende A Elemente, die die ersetzen Zu Stütze mit einem href Attribut. Das heißt, wenn Sie Folgendes schreiben:

<VerknüpfungZu=„/some/path“>Dies ist eine Link-Komponente im Svelte-RoutingVerknüpfung>

Svelte präsentiert es dem Browser als:

<Ahref=„/some/path“>Dies ist eine Link-Komponente im Svelte-RoutingA>

Sie sollten die Link-Komponente anstelle der herkömmlichen verwenden A Element beim Arbeiten mit Svelte-Routing. Das ist weil A Elemente führen standardmäßig einen Neuladen der Seite durch.

Erstellen eines SPA mit Svelte und Svelte-Routing

Es ist an der Zeit, alles, was Sie gelernt haben, in die Praxis umzusetzen, indem Sie eine einfache Wörterbuchanwendung erstellen, mit der der Benutzer nach Wörtern suchen kann. Dieses Projekt wird das kostenlose verwenden Wörterbuch-API.

Stellen Sie zunächst sicher, dass Yarn auf Ihrem Computer installiert ist, und führen Sie Folgendes aus:

Garn erstellen vite

Dadurch wird ein neues Projekt erstellt das Vite-Build-Tool. Benennen Sie Ihr Projekt und wählen Sie dann „Svelte“ als Framework und „JavaScript“ als Variante. Führen Sie anschließend nacheinander die folgenden Befehle aus:

CD
Garn
Garn fügt schlankes Routing hinzu
Garnentw

Als nächstes löschen Sie den Inhalt der App.svelte Datei und ändern Sie die Projektstruktur so, dass sie wie folgt aussieht:

Aus der Abbildung oben können Sie ersehen, dass es einen Ordner „components“ mit zwei Dateien gibt: Startseite.svelte Und Bedeutung.svelte. Bedeutung.svelte ist die Komponente, die gerendert wird, wenn der Benutzer nach einem Wort sucht.

Navigieren Sie zu App.svelte Datei und importieren Sie die Route-, Router- und Link-Komponenten aus der Svelte-Routing-Bibliothek. Stellen Sie außerdem sicher, dass Sie die importieren Startseite.svelte Und App.svelte Komponenten.

<Skript>
 import { Route, Router, Link } aus „svelte-routing“;
 Home aus „./components/Home.svelte“ importieren;
 import Meaning from „./components/Meaning.svelte“;
Skript>

Als nächstes erstellen Sie eine Router-Komponente, die a umschließt hauptsächlich HTML-Element mit der Klasse „app“.

<Router>
<hauptsächlichKlasse=„App“>
hauptsächlich>
Router>

Im hauptsächlich Element, füge ein hinzu Navigation Element mit einer Link-Komponente als untergeordnetem Element. Die „to“-Requisite dieser Link-Komponente sollte auf „/“ zeigen. Diese Komponente ermöglicht dem Benutzer die Navigation zur Homepage.

<hauptsächlichKlasse=„App“>
<Navigation>
<VerknüpfungZu="/">HeimVerknüpfung>
Navigation>
hauptsächlich>

Jetzt ist es an der Zeit, an den Routen zu arbeiten. Wenn der Benutzer die App lädt, wird die Heim Komponente rendern soll.

Wenn Sie zu „/find/:word“ navigieren, sollte das gerendert werden Bedeutung Komponente. Die „:word“-Klausel ist ein Pfadparameter.

Bei diesem Projekt müssen Sie sich keine Gedanken über CSS machen. Ersetzen Sie einfach den Inhalt durch Ihren eigenen app.css Datei mit dem Inhalt der app.css Datei von dieses GitHub-Repository.

Jetzt ist es an der Zeit, die Routen zu definieren. Der Pfad auf Stammebene sollte das rendern Heim Komponente, während „/find/:word“ die rendern sollte Bedeutung Komponente.

<RouteWeg="/"Komponente={Heim} />
<RouteWeg=„/find/:word“let: params>
<BedeutungWort={params.word} />
Route>

Dieser Codeblock verwendet die lassen Direktive, um den Parameter „word“ an die weiterzugeben Bedeutung Komponente als Requisite.

Öffnen Sie nun die Startseite.svelte Datei und importieren Sie die navigieren Dienstprogramm aus der Bibliothek „svelte-routing“ und definieren Sie eine Variable eingegebenes Wort.

<Skript>
 import { navigiere } aus „svelte-routing“;
 let enterWord;
Skript>

Unter dem Skript Tag, erstellen Sie ein Hauptelement mit der Klasse „homepage“ und erstellen Sie dann ein div Element mit der Klasse „dictionary-text“.

<hauptsächlichKlasse="Startseite">
<divKlasse=„Wörterbuchtext“>Wörterbuchdiv>
hauptsächlich>

Erstellen Sie als Nächstes ein Formular mit einem auf: abschicken Richtlinie. Dieses Formular sollte zwei untergeordnete Elemente enthalten: an Eingang Element, dessen Wert an gebunden ist eingegebenes Wort Variable und eine Schaltfläche zum Senden, die bedingt gerendert wird, sobald der Benutzer mit der Eingabe beginnt:

<formauf: abschicken|Standard verhindern={() => navigieren(`/find/${enteredWord.toLowerCase()}`)}>
<Eingang
 type="text"
 bind: value={enteredWord}
 placeholder="Beginnen Sie Ihre Suche..."
 Autofokus
 />
 {#if enterWord}
<TasteTyp="einreichen">SuchbegriffTaste>
 {/Wenn}
form>

Dieser Codeblock verwendet die navigieren Funktion, um den Benutzer umzuleiten, sobald die Übermittlungsaktion abgeschlossen ist. Öffnen Sie nun die Bedeutung.svelte Datei und exportieren Sie im Skript-Tag die Wort prop und erstelle eine Fehlermeldung Variable:

exportieren lassen Wort;
let errorMessage = „Keine Verbindung. Überprüfen Sie Ihr Internet";

Stellen Sie als Nächstes eine GET-Anfrage an die Dictionary-API und übergeben Sie die Wort als Parameter:

asynchronFunktiongetWordMeaning(Wort) {
const Antwort = erwarten bringen(
` https://api.dictionaryapi.dev/api/v2/entries/en/${word}`
 );
const json = erwarten Antwort.json();
Konsole.log (json);
Wenn (response.ok) {
zurückkehren json;
 } anders {
 errorMessage = json.message;
WurfneuFehler(json);
 }
 }
lassen Promise = getWordMeaning (Wort);

Im obigen Codeblock gibt die asynchrone Funktion die JSON-Daten zurück, wenn die Antwort erfolgreich ist. Die Promise-Variable stellt das Ergebnis dar getWordMeaning Funktion beim Aufruf.

Definieren Sie im Markup ein Div mit der Klasse Bedeutungsseite. Als nächstes definieren Sie ein h1-Element, das das enthält Wort Variable in Kleinbuchstaben:

<divKlasse=„Bedeutungsseite“>
<h1>
 {word.toLowerCase()}
h1>
div>

Als nächstes verwenden Sie die Warteblöcke von Svelte, um die aufzurufen getWordMeaning Funktion:

{#warte auf Versprechen}
<P>Wird geladen...P>
{:dann Einträge}
{:fangen}
 {Fehlermeldung}
{/erwarten}

Dieser Code zeigt die an Wird geladen... Text wann die GET-Anfrage wird gestellt zur API. Wenn ein Fehler vorliegt, wird der Inhalt angezeigt Fehlermeldung.

Im {:dann Einträge} Block, fügen Sie Folgendes hinzu:

{#jeder Eintrag als Eintrag}
 {#jeder Eintrag.Meanings als Bedeutung}
<divKlasse="Eintrag">
<divKlasse="Teil der Rede">
 {meaning.partOfSpeech}
div>
<ol>
 {#jede Bedeutung.Definitionen als Definition}
<li>
 {definition.definition}
<br />
<divKlasse="Beispiel">
 {#if definition.example}
 {definition.example}
 {/Wenn}
div>
li>
 {/jede}
ol>
div>
 {/jede}
{/jede}

Wenn das Versprechen erfolgreich gelöst wird, wird die Einträge Die Variable enthält die resultierenden Daten.

Dann für jede Iteration von Eintrag Und Bedeutung, dieser Code rendert den Teil der Sprache mit Bedeutung.partOfSpeech und eine Liste von Definitionen mit definition.definition. Es wird auch ein Beispielsatz gerendert, sofern einer verfügbar ist.

Das ist es. Sie haben mit Svelte-Routing eine Wörterbuch-Single-Page-Anwendung (SPA) erstellt. Wenn Sie möchten, können Sie noch einen Schritt weiter gehen oder einen Blick darauf werfen schlanker Navigator, eine Gabel von schlankes Routing.

Verbesserung der Benutzererfahrung durch clientseitiges Routing

Die Handhabung des Routings im Browser statt auf dem Server bietet viele Vorteile. Anwendungen, die clientseitiges Routing nutzen, können sich für den Endbenutzer reibungsloser anfühlen, insbesondere in Kombination mit Animationen und Übergängen.

Wenn Sie jedoch möchten, dass Ihre Website in Suchmaschinen einen höheren Rang erreicht, sollten Sie die Verwaltung von Routen auf dem Server in Betracht ziehen.