Verschachtelte und dynamische Routen
Erstellen Sie verschachtelte Layouts und dynamische Routenparameter
Verschachtelte und dynamische Routen ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 3. 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 Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.
Über statische Routen hinaus
In realen Anwendungen müssen Routen Daten enthalten und sich in Layouts verschachteln lassen.
- Dynamische Segmente erfassen Werte wie eine id
- Verschachtelte Routen rendern untergeordnete Routen innerhalb einer übergeordneten Route
- Benannte Routen und programmgesteuerte Navigation sorgen für zusätzliche Flexibilität
Dynamische Routensegmente
Ein Doppelpunkt definiert ein dynamisches Segment, das jedem Wert entspricht.
const routes = [
{ path: "/user/:id", component: UserProfile }
]
// Matches /user/1, /user/42, /user/abcAuf route.params zugreifen
Lesen Sie den erfassten Wert über route.params aus.
<script setup>
import { useRoute } from "vue-router"
const route = useRoute()
console.log(route.params.id)
</script>Auf Parameteränderungen reagieren
Wenn sich nur der Parameter ändert, etwa von /user/1 zu /user/2, wird die Komponente wiederverwendet. Überwachen Sie den Parameter, um die Daten neu zu laden.
import { watch } from "vue"
import { useRoute } from "vue-router"
const route = useRoute()
watch(() => route.params.id, (newId) => {
loadUser(newId)
})Mehrere dynamische Segmente
Routen können mehrere dynamische Bestandteile enthalten.
const routes = [
{ path: "/user/:userId/post/:postId", component: Post }
]
// route.params.userId and route.params.postIdVerschachtelte Routen
Verschachtelte Routen ermöglichen es untergeordneten Routen, innerhalb einer übergeordneten Komponente gerendert zu werden.
const routes = [
{
path: "/user/:id",
component: UserLayout,
children: [
{ path: "profile", component: Profile },
{ path: "posts", component: Posts }
]
}
]Verschachteltes router-view
Die übergeordnete Komponente benötigt ein eigenes router-view, in dem untergeordnete Routen gerendert werden.
<!-- UserLayout.vue -->
<template>
<h1>User</h1>
<router-view></router-view>
</template>
<!-- /user/1/profile renders Profile here -->Benannte Routen
Geben Sie einer Route einen Namen, um auf sie zu verweisen, ohne den Pfad fest zu codieren.
const routes = [
{
path: "/user/:id",
name: "user",
component: UserProfile
}
]Über den Namen verlinken
router-link kann auf eine benannte Route verweisen und Parameter als Objekt übergeben.
<router-link
:to="{ name: 'user', params: { id: 42 } }"
>
View User
</router-link>Programmgesteuerte Navigation
Navigieren Sie aus JavaScript mit der push-Methode des Routers.
import { useRouter } from "vue-router"
const router = useRouter()
function goToUser(id) {
router.push({ name: "user", params: { id } })
}Weitere Navigationsmethoden
Der Router bietet weitere Hilfsfunktionen für die Navigation:
- router.push fügt einen neuen Verlaufseintrag hinzu
- router.replace navigiert, ohne einen neuen Verlaufseintrag hinzuzufügen
- router.back wechselt zur vorherigen Seite
Kurzer Test
Testen Sie Ihr Verständnis dynamischer und verschachtelter Routen.
Zusammenfassung: Verschachtelte und dynamische Routen
Sie haben fortgeschrittenes Routing kennengelernt:
- Dynamische Segmente (/user/:id) werden in route.params erfasst
- Verschachtelte Routen werden über children und ein verschachteltes router-view umgesetzt
- Benannte Routen ermöglichen das Verlinken über den Namen
- router.push führt eine programmgesteuerte Navigation aus
Als Nächstes: Navigation Guards.
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 42
- Lektionen
- 156
Häufig gestellte Fragen
Ist die Lektion „Verschachtelte und dynamische Routen“ kostenlos?
Ja — der vollständige Text von „Verschachtelte und dynamische Routen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Verschachtelte und dynamische Routen“?
Erstellen Sie verschachtelte Layouts und dynamische Routenparameter Du übst Vue 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 Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue 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 3.
Wie lange dauert die Lektion „Verschachtelte und dynamische Routen“?
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 Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue 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
- Vue Router einrichten
- Verschachtelte und dynamische Routen
- Navigationswächter