0Pricing
Vue Academy · Lektion

Route-Meta-Felder und Typisierung

meta: { requiresAuth: true } und TypeScript-Deklarationszusammenführung für typisierte Meta-Felder

Route-Meta-Felder und Typisierung ist eine kostenlose Vue 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 Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was sind Route-Meta-Felder?

Jede Route kann ein meta-Objekt enthalten: beliebige Daten, die an die Route angehängt werden. Das eignet sich ideal für Flags wie Authentifizierungsanforderungen, erlaubte Rollen, Seitentitel oder Layout-Auswahl.

Meta zu einer Route hinzufügen

Setzen Sie den Schlüssel meta im Routeneintrag. Welche Werte Sie verwenden, bleibt vollständig Ihnen überlassen.

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, roles: ['admin', 'editor'] }
  }
]

Meta in einem Guard lesen

Die häufigste Verwendung findet in einem Navigations-Guard statt. router.beforeEach wird vor jeder Navigation ausgeführt und erhält die Zielroute, deren meta Sie untersuchen können.

router.beforeEach((to, from) => {
  if (to.meta.requiresAuth) {
    // check login
  }
})

Nicht authentifizierte Benutzer umleiten

Geben Sie aus dem Guard eine Routenposition zurück, um umzuleiten. Die Rückgabe von false bricht die Navigation ab; wenn Sie nichts oder true zurückgeben, wird sie zugelassen.

router.beforeEach((to) => {
  const auth = useAuthStore()
  if (to.meta.requiresAuth && !auth.isLoggedIn) {
    return { path: '/login' }
  }
})

Rollenbasierter Zugriff

Kombinieren Sie das Meta-Feld roles mit der Rolle des aktuellen Benutzers, um Seiten anhand von Berechtigungen zu schützen.

router.beforeEach((to) => {
  const auth = useAuthStore()
  const roles = to.meta.roles
  if (roles && !roles.includes(auth.role)) {
    return { path: '/forbidden' }
  }
})

Meta wird von übergeordneten Routen zusammengeführt

Verschachtelte Routen erben Meta von ihren übergeordneten Routen über to.meta, das alle übereinstimmenden Routeneinträge zusammenführt. Eine untergeordnete Route sieht das Meta der übergeordneten Route, sofern sie denselben Schlüssel nicht überschreibt.

Das Typisierungsproblem

Standardmäßig typisiert TypeScript meta als leeres Objekt, daher verursacht to.meta.requiresAuth einen Fehler. Sie beheben das durch Deklarationszusammenführung mit den Vue-Router-Typen.

Typisiertes Meta deklarieren

Erweitern Sie das Interface RouteMeta aus vue-router. Platzieren Sie dies in einer .d.ts-Datei oder in einem beliebigen Modul mit einem export {}.

import 'vue-router'

declare module 'vue-router' {
  interface RouteMeta {
    requiresAuth?: boolean
    roles?: string[]
  }
}

export {}

Meta wird jetzt typgeprüft

Nach der Erweiterung kennt der Compiler die Struktur von meta. Tippfehler wie requireAuth werden erkannt, und die Autovervollständigung funktioniert.

router.beforeEach((to) => {
  if (to.meta.requiresAuth) { /* typed as boolean | undefined */ }
})

Meta in Komponenten verwenden

Innerhalb einer Komponente können Sie das Meta der aktuellen Route über useRoute() lesen – dank der Erweiterung ebenfalls typisiert.

import { useRoute } from 'vue-router'
const route = useRoute()
const secure = route.meta.requiresAuth

Meta für Seitentitel

Ein gängiges Muster: Speichern Sie einen title in Meta und setzen Sie document.title in einem globalen Guard.

router.afterEach((to) => {
  if (to.meta.title) document.title = to.meta.title
})

Kurzer Test

Testen Sie Ihr Wissen über Route-Meta und Typisierung.

Zusammenfassung

Route-Meta-Felder enthalten routenspezifische Daten:

  • Definieren Sie Meta in Routeneinträgen (requiresAuth, roles, title).
  • Lesen Sie es in router.beforeEach, um die Navigation zu schützen.
  • Meta wird von übergeordneten an untergeordnete Routen zusammengeführt.
  • Typisieren Sie es durch Deklarationszusammenführung mit RouteMeta aus vue-router.

Häufig gestellte Fragen

Ist die Lektion „Route-Meta-Felder und Typisierung“ kostenlos?

Ja — der vollständige Text von „Route-Meta-Felder und Typisierung“ 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 „Route-Meta-Felder und Typisierung“?

meta: { requiresAuth: true } und TypeScript-Deklarationszusammenführung für typisierte Meta-Felder 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 4.

Wie lange dauert die Lektion „Route-Meta-Felder und Typisierung“?

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

  1. Route-Meta-Felder und Typisierung
  2. Routenübergänge und Animationen
  3. Konfiguration des Scroll-Verhaltens
  4. Programmatische Navigation und useRouter
← Zurück zu Vue Academy