Vue Academy · Lektion

Vue Router einrichten

Installieren Sie Vue Router und definieren Sie Ihre ersten Routen

Lektion 1 von 313 Schritte

Vue Router einrichten ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Was ist Vue Router?

Vue Router ist die offizielle Routing-Bibliothek für Vue.

Ordnet URLs Komponenten zu
Ermöglicht die Navigation in Single-Page-Anwendungen ohne vollständiges Neuladen der Seite
Verwaltet Verlauf, Links und Parameter

Vue Router installieren

Fügen Sie Vue Router mit npm zu Ihrem Projekt hinzu.

# Install Vue Router 4 (for Vue 3)
npm install vue-router

# Or have it added during npm create vue@latest

Routenkomponenten erstellen

Jede Route rendert eine Komponente. Beginnen Sie mit einfachen Seitenkomponenten.

<!-- Home.vue -->
<template>
  <h1>Home Page</h1>
</template>

<!-- About.vue -->
<template>
  <h1>About Page</h1>
</template>

Das routes-Array definieren

Ein routes-Array ordnet Pfade Komponenten zu.

import Home from "./views/Home.vue"
import About from "./views/About.vue"

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About }
]

createRouter

Die Funktion createRouter erstellt aus den Routen und einem Verlaufsmodus einen Router.

import { createRouter, createWebHistory } from "vue-router"

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

createWebHistory

createWebHistory verwendet die HTML5-History-API für übersichtliche URLs wie /about.

Kein Hash in der URL
Erfordert eine Serverkonfiguration, damit direkte Aufrufe tiefer liegender Links funktionieren
Die Alternative ist createWebHashHistory (/#/about)

Den Router registrieren

Installieren Sie den Router mit app.use in der App.

import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"

createApp(App)
  .use(router)
  .mount("#app")

router-view

Die Komponente router-view ist der Ort, an dem die passende Routenkomponente gerendert wird.

<!-- App.vue -->
<template>
  <nav>...</nav>
  <router-view></router-view>
</template>

<!-- The current page renders here -->

router-link

Verwenden Sie für die Navigation router-link statt einfacher Anker-Tags. Dadurch wird die Seite nicht vollständig neu geladen.

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
</template>

Stil für aktive Links

router-link fügt dem aktiven Link automatisch CSS-Klassen hinzu.

router-link-active für teilweise Übereinstimmungen
router-link-exact-active für exakte Übereinstimmungen

Formatieren Sie diese Klassen, um die aktuelle Seite hervorzuheben.

Alles zusammenfügen

Der vollständige Ablauf:

Definieren Sie Routen, die Pfade Komponenten zuordnen
Erstellen Sie den Router mit createRouter und createWebHistory
Registrieren Sie ihn mit app.use(router)
Platzieren Sie router-view und navigieren Sie mit router-link

Kurzer Test

Testen Sie Ihr Verständnis der Einrichtung von Vue Router.

Beantworte es in der interaktiven Lektion

Zusammenfassung: Vue Router einrichten

Sie haben clientseitiges Routing eingerichtet:

Installieren Sie Vue Router mit npm install vue-router
Definieren Sie ein routes-Array
Verwenden Sie createRouter mit createWebHistory
Registrieren Sie den Router mit app.use(router)
Verwenden Sie router-view und router-link

Als Nächstes: verschachtelte und dynamische Routen.

Kostenlos starten

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

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Vue Router einrichten“ kostenlos?

Ja — der vollständige Text von „Vue Router einrichten“ 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 „Vue Router einrichten“?

Installieren Sie Vue Router und definieren Sie Ihre ersten Routen 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 1 von 3.

Wie lange dauert die Lektion „Vue Router einrichten“?

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

← Zurück zu Vue Academy