Programmatische Navigation und useRouter
router.push(), router.replace(), router.go(), die Composables useRouter() und useRoute()
Programmatische Navigation und useRouter ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 4 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 Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Aus Code navigieren
Neben RouterLink müssen Sie häufig aus JavaScript navigieren – etwa nach dem Absenden eines Formulars oder nach der Anmeldung. Das Composable useRouter stellt Ihnen die Router-Instanz dafür bereit.
Den Router abrufen
Rufen Sie useRouter() innerhalb von <script setup> auf. Das zurückgegebene Objekt stellt push, replace, go und weitere Methoden bereit.
import { useRouter } from 'vue-router'
const router = useRouter()Mit push navigieren
router.push fügt dem Verlaufsstapel einen Eintrag hinzu – wie beim Anklicken eines Links. Die einfachste Form erwartet eine Pfadzeichenfolge.
router.push('/dashboard')Mit einem Routenobjekt pushen
Sie können auch ein Objekt mit name, params und query übergeben. Benannte Routen vermeiden fest codierte Pfade.
router.push({
name: 'user',
params: { id: 42 },
query: { tab: 'profile' }
})Replace: Kein Verlaufseintrag
router.replace navigiert, ohne den Verlauf zu erweitern, sodass die Zurück-Schaltfläche diese Route überspringt. Verwenden Sie es nach der Anmeldung, damit Benutzer nicht zur Anmeldeseite zurückkehren können.
router.replace('/dashboard')Zurück- und vorwärtsgehen
router.go(n) bewegt sich um n Schritte durch den Verlauf. router.go(-1) geht eine Seite zurück; router.go(1) geht vorwärts.
function goBack() {
router.go(-1)
}Nach einer asynchronen Action
Ein typischer Ablauf: Senden Sie ein Formular ab, warten Sie das Ergebnis mit await ab und navigieren Sie anschließend. push gibt ein Promise zurück, auf dessen Abschluss Sie mit await warten können.
async function login() {
await auth.signIn(form)
router.push('/dashboard')
}Die aktuelle Route lesen
Um die Parameter und Query der aktuellen Route zu lesen, verwenden Sie das Composable useRoute. Verwechseln Sie es nicht mit useRouter – useRoute ist die Route, useRouter der Navigator.
import { useRoute } from 'vue-router'
const route = useRoute()Auf Parameter zugreifen
Lesen Sie dynamische Segmente über route.params. Bei einer Route /user/:id befindet sich die id unter route.params.id.
const userId = route.params.idAuf Query-Strings zugreifen
Lesen Sie den Query-String über route.query. Für ?tab=profile verwenden Sie route.query.tab.
const tab = route.query.tabAuf Parameteränderungen reagieren
Da route reaktiv ist, können Sie es mit watch überwachen und auf Änderungen der Parameter reagieren, während Sie in derselben Komponente bleiben.
import { watch } from 'vue'
watch(() => route.params.id, (newId) => {
loadUser(newId)
})Kurzer Test
Testen Sie Ihr Wissen über die programmatische Navigation.
Zusammenfassung
Sie haben die programmatische Navigation kennengelernt:
- useRouter() stellt push, replace und go bereit.
- push erweitert den Verlauf, replace nicht; go(-1) geht zurück.
- push akzeptiert eine Pfadzeichenfolge oder ein Objekt mit { name, params, query }.
- useRoute() liest die aktuellen Parameter und die aktuelle Query und ist reaktiv.
Häufig gestellte Fragen
Ist die Lektion „Programmatische Navigation und useRouter“ kostenlos?
Ja — der vollständige Text von „Programmatische Navigation und useRouter“ 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 4 Lektionen.
Was lerne ich in „Programmatische Navigation und useRouter“?
router.push(), router.replace(), router.go(), die Composables useRouter() und useRoute() 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 4 von 4.
Wie lange dauert die Lektion „Programmatische Navigation und useRouter“?
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
- Route-Meta-Felder und Typisierung
- Routenübergänge und Animationen
- Konfiguration des Scroll-Verhaltens
- Programmatische Navigation und useRouter