Dynamische Routenparameter: [id]
Erfassen Sie URL-Segmente als Parameter mit der Klammernotation in Ordnernamen.
Dynamische Routenparameter: [id] ist eine kostenlose Sveltejs Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.
Ordnernamen in eckigen Klammern
Verwenden Sie eckige Klammern in Ordnernamen für dynamische Segmente.
src/routes/blog/[slug]/+page.svelte -> /blog/:slugAuf den Parameter zugreifen
Verwenden Sie innerhalb der Seite den Store $page aus $app/stores.
import { page } from "$app/stores";
<p>Slug: {$page.params.slug}</p>Zugriff in der load-Funktion
Verwenden Sie innerhalb von +page.js load direkt params.slug.
export function load({ params }) { return { slug: params.slug }; }Mehrere Parameter
Verwenden Sie mehrere Klammerausdrücke für Pfade mit mehreren Segmenten.
src/routes/[lang]/[slug]/+page.svelteParameter validieren
Geben Sie aus load eine 404 zurück, wenn der Parameter ungültig ist.
if (!isValid(params.slug)) error(404, "Not found");Matcher
Fügen Sie einen src/params-Matcher hinzu, um für einen Parameter einen regulären Ausdruck zu erzwingen.
src/routes/blog/[slug=alpha]/+page.svelteMatcher definieren
Erstellen Sie src/params/alpha.js, das eine Funktion exportiert.
export function match(value) { return /^[a-z]+$/.test(value); }SEO mit Slugs
Slugs sind normalerweise URL-sichere IDs. Erzeugen Sie Slugs aus Titeln, um übersichtliche URLs zu erhalten.
Statische und dynamische Routes kombinieren
Verwenden Sie statische Ordner neben dynamischen Ordnern; bei Konflikten haben statische Routes Vorrang.
Typsicherheit
SvelteKit generiert für jede Route Typen für die Parameter, die im Argument der load-Funktion verfügbar sind.
Dynamische Routes vorab rendern
Verwenden Sie entries in +page.js, um die vorab zu rendernden Werte aufzulisten.
Schnelltest
Wie werden dynamische Segmente deklariert?
Zusammenfassung
Verwenden Sie Ordner mit [param] für dynamische Segmente. Greifen Sie in load über params oder über $page.params darauf zu.
Häufig gestellte Fragen
Ist die Lektion „Dynamische Routenparameter: [id]“ kostenlos?
Ja — der vollständige Text von „Dynamische Routenparameter: [id]“ 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 „Dynamische Routenparameter: [id]“?
Erfassen Sie URL-Segmente als Parameter mit der Klammernotation in Ordnernamen. 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 2 von 4.
Wie lange dauert die Lektion „Dynamische Routenparameter: [id]“?
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