Dateibasierte Routen mit +page.svelte
Ordnen Sie Dateipfade unter src/routes automatisch URL-Pfaden zu.
Dateibasierte Routen mit +page.svelte ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Sveltejs Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Datei = Route
SvelteKit ordnet Ordner unter src/routes URL-Pfaden zu. Eine Datei +page.svelte definiert eine Route.
Stammseite
src/routes/+page.svelte wird unter / gerendert.
About-Seite
src/routes/about/+page.svelte wird unter /about gerendert.
Verschachtelte Routes
Ordner können verschachtelt werden. src/routes/blog/posts/+page.svelte wird unter /blog/posts gerendert.
Seitenkomponente
Die Datei ist eine normale Svelte-Komponente. Verwenden Sie jede Funktion, die Sie bereits gelernt haben.
<!-- +page.svelte -->
<h1>About Us</h1>
<p>Welcome to our site.</p>Routing-Konvention
Dateinamen, die mit + beginnen, haben für SvelteKit eine besondere Bedeutung: +page, +layout, +server usw.
Keine Imports erforderlich
Sie müssen Routes nicht manuell registrieren. Das Dateisystem ist der Router.
Programmatische Navigation
Verwenden Sie goto aus $app/navigation, um im Code zu navigieren.
import { goto } from "$app/navigation";
goto("/about");Link-Komponente
Verwenden Sie einfache <a href>-Tags; SvelteKit fängt sie für die clientseitige Navigation ab.
Vorabrufen
Verwenden Sie data-sveltekit-preload-data in einem Link für das durch Hover ausgelöste Prefetching.
404-Seite
Erstellen Sie src/routes/+error.svelte, um die Nicht-gefunden-Seite anzupassen.
Schnelltest
Wo erstellen Sie eine /products-Route?
Zusammenfassung
Das Dateisystem definiert die Routes. Ein +page.svelte in einem beliebigen Ordner unter src/routes wird zu einer Route.
Häufig gestellte Fragen
Ist die Lektion „Dateibasierte Routen mit +page.svelte“ kostenlos?
Ja — der vollständige Text von „Dateibasierte Routen mit +page.svelte“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Sveltejs Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Sveltejs Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Dateibasierte Routen mit +page.svelte“?
Ordnen Sie Dateipfade unter src/routes automatisch URL-Pfaden zu. Du übst Sveltejs Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Sveltejs Academy zu starten?
Keine Vorkenntnisse erforderlich. Sveltejs Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.
Wie lange dauert die Lektion „Dateibasierte Routen mit +page.svelte“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Sveltejs Academy-Lektion Code schreiben und ausführen?
Ja. Jede Sveltejs Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Dateibasierte Routen mit +page.svelte
- Dynamische Routenparameter: [id]
- Optionale und Rest-Parameter
- Layout-Dateien: +layout.svelte