Eine Anleitung zum Routing in SvelteKit

SvelteKit ist ein Framework zum Erstellen von Webanwendungen jeder Größe mit großer Entwicklungserfahrung und flexiblem dateibasierten Routing. Das Framework kombiniert die SEO- und progressiven Verbesserungsvorteile von Single-Page-Apps mit der schnellen Navigation serverseitig gerenderter Anwendungen. Eines der entscheidenden Merkmale von SvelteKit ist sein Routing-System.

SvelteKit-Routing verstehen

SvelteKit ist ein Framework auf Svelte gebaut. In SvelteKit folgt das Routing einem dateibasierten System. Das bedeutet, dass die Verzeichnisstruktur Ihrer Seiten die Routen Ihrer Anwendung bestimmt.

Um das SvelteKit-Routing-System besser zu verstehen, erstellen Sie zunächst ein SvelteKit-Projekt. Führen Sie dazu den folgenden Code in Ihrem Terminal aus:

npm create svelte@latest my-app

Nachdem Sie den obigen Codeblock ausgeführt haben, beantworten Sie eine Reihe von Eingabeaufforderungen zum Konfigurieren Ihrer Anwendung.

Als nächstes installieren Sie die notwendigen Abhängigkeiten für Ihr Projekt. Um dies zu tun CD in Ihr Projekt und führen Sie Folgendes aus:

npm install

Öffnen Sie das Projekt auf dem Entwicklungsserver, indem Sie den folgenden Befehl in Ihrem Terminal ausführen:

npm run dev

Jetzt ist Ihr Projekt betriebsbereit http://localhost: 5173/. Wenn Sie die Anwendung auf Ihrem Entwicklungsserver öffnen, steht Ihnen eine Schnittstelle ähnlich der Abbildung unten zur Verfügung.

Die Stammroute des Projekts ‘/’ entspricht einer Datei mit dem Namen +page.svelte. Sie finden die +page.svelte Datei folgt dem Dateipfad; src/routes in Ihrem Projekt.

Um verschiedene Routen in SvelteKit zu erstellen, können Sie Ordner in Ihrem erstellen src/routes Verzeichnis. Jeder Ordner entspricht einer anderen Route. Generieren Sie eine +page.svelte Datei in jedem Ordner, um den Inhalt dieser Route zu definieren.

<main>
<h2> This is the about page h2>
main>

Der obige Code befindet sich im +Seite Datei. Sie erstellen eine schlanke Datei im um Ordner im src/routes Verzeichnis. Diese Datei enthält den Inhalt der Route. Um die Route in Ihrem Webbrowser anzuzeigen, navigieren Sie zu http://localhost: 5173/ca.

Navigieren zum /about Route zeigt diese Schnittstelle auf Ihrem Bildschirm an:

Verschachtelte Routen verstehen

Verschachtelte Routen sind eine Möglichkeit, das Routingsystem in einer Webanwendung zu strukturieren. In einer verschachtelten Routenstruktur werden Routen innerhalb anderer Routen platziert, wodurch eine hierarchische Beziehung zwischen ihnen entsteht. Sie können in SvelteKit verschachtelte Routen erstellen, indem Sie Ordner mit dem platzieren +page.svelte Datei in anderen Routenordnern unter src/routes Verzeichnis.

Zum Beispiel:

In diesem Beispiel verschachteln Sie die Post Route innerhalb der Blog Route. Zum Verschachteln Post Route innerhalb der Blog Route, erstellen Sie die Post Ordner und seine +page.svelte Datei innerhalb der Blog Routenordner.

Um in Ihrer Anwendung auf die Blog-Route zuzugreifen, öffnen Sie Ihren Webbrowser und navigieren Sie zu http://localhost: 5173/Blog.

Die Postroute wird unter verfügbar sein http://localhost: 5173/Blog/Beitrag.

Layouts und Fehlerrouten

SvelteKit definiert a Layout für die Anwendung auf ähnliche Weise wie Next.js. Beide Frameworks verwenden a Layout Komponente, um die Struktur der Anwendung zu definieren.

SvelteKit verwendet die +layout.svelte um ein Layout für eine Gruppe von Seiten zu definieren. Sie können eine erstellen +layout.svelte Datei in der src/routes Verzeichnis, um ein Layout für alle Seiten in Ihrer Anwendung zu definieren, oder in ein Unterverzeichnis, um ein Layout für eine bestimmte Seitengruppe zu definieren.

Hier ist ein Beispiel dafür, wie Sie eine Layoutroute für Ihre gesamte Anwendung definieren:

Das obige Beispiel zeigt eine Layout-Route. Die Datei enthält eine h1 Element, das den Text anzeigt „Dies ist eine SvelteKit-Anwendung.“ Es enthält auch a Slot Element. Der Slot Das Element ist ein spezielles Element, das den Ort definiert, an dem die Anwendung den Inhalt Ihrer Routen im Layout rendert. Es funktioniert genauso wie Vue-Komponenten.

In diesem Fall stellt Ihre Anwendung den Inhalt Ihrer Routen unterhalb dar h1 Element.

Um eine Fehlerseite zu definieren, erstellen Sie eine Datei mit dem Namen +error.svelte im src/routes Verzeichnis. Diese Seite wird angezeigt, wenn beim Rendern ein Fehler auftritt.

Zum Beispiel:

Wenn ein Fehler auftritt, beispielsweise beim Navigieren zu einer nicht vorhandenen Route, greift Ihre Anwendung auf diese zurück Fehler Route stattdessen.

Zum Beispiel:

Die Route http://localhost: 5173/Geh existiert nicht, daher rendert die Anwendung das Fehler Route stattdessen.

Navigieren zwischen Seiten

Für ein gutes Erlebnis ist es entscheidend, die beste Möglichkeit zu finden, zwischen den von Ihnen erstellten Routen zu navigieren. Traditionell werden beim dateibasierten Routing in den meisten Technologien Links verwendet, um zwischen verschiedenen Seiten zu navigieren. Um zwischen den Seiten in SvelteKit zu navigieren, können Sie ein einfaches HTML-Anker-Tag verwenden.

Sie können diesen Code beispielsweise in jede gewünschte Route schreiben, Sie sollten ihn jedoch in die schreiben Layout Route oberhalb der Slot Etikett:

<ul>
<li>
<ahref="/">Homea>
li>
<li>
<ahref="/about">Abouta>
li>
<li>
<ahref="/blog">Bloga>
li>
<li>
<ahref="/blog/post">Posta>
li>
ul>

Durch Klicken auf ein beliebiges Ankertag werden Sie zur entsprechenden Route navigiert.

Dynamisches Routing in SvelteKit

Mit dynamischem Routing können Sie schrittweise Routen erstellen, die die Anwendung basierend auf Daten oder Parametern generiert. Damit können Sie flexible und dynamische Webanwendungen erstellen, die unterschiedliche Routen verarbeiten und Inhalte entsprechend spezifischer Daten oder Parameter anzeigen.

Um eine dynamische Route in SvelteKit zu erstellen, erstellen Sie einen Ordner mit dem Namen [Schnecke] und dann a +page.svelte Datei im Ordner, um den Inhalt der Route zu definieren. Beachten Sie, dass Sie den Ordner nach Belieben benennen können. Stellen Sie jedoch sicher, dass der Name immer in eckige Klammern gesetzt wird [ ].

Hier ist ein Beispiel für eine dynamische Route:

Um in Ihrem Webbrowser auf diese Route zuzugreifen, navigieren Sie zu diesem Link http://localhost: 5173/[Schnecke], Wo [Schnecke] kann ein beliebiger eindeutiger, undefinierter Routenname sein, den Sie wählen.

Sie können auf Ihre Bewerbungen zugreifen [Schnecke] Parameter mit dem $page.params Daten von $app/stores.

Zum Beispiel:

<scriptlang='ts'>
 import { page } from '$app/stores'
 const params = $page.params;
script>
<main>
<h1>This is the {params.slug} pageh1>
main>

Hier weisen Sie die zu $page.params Einspruch gegen die param Variable und rendern Sie die param.slug Daten in Ihrer Bewerbung.

Die Anwendung ruft die ab param.slug Daten aus Ihrem Link. Wenn Sie beispielsweise zu navigieren http://localhost: 5173/Feuer, wird der in der Anwendung angezeigte Inhalt angezeigt „Das ist die Feuerseite.“

Jetzt kennen Sie die Grundlagen des Routings in SvelteKit

Routing in SvelteKit ist eine leistungsstarke Funktion, die es Ihnen ermöglicht, Ihre Anwendung auf eine sinnvolle Weise zu strukturieren. Wenn Sie wissen, wie Sie diese Funktion verwenden, können Sie effizientere und benutzerfreundlichere Webanwendungen erstellen. Ganz gleich, ob Sie ein kleines persönliches Projekt oder eine groß angelegte Anwendung erstellen, das Routing-System von SvelteKit verfügt über die Tools, die Sie für den Erfolg benötigen.