Vue Academy · Les

Route-meta-velden en typering

meta: { requiresAuth: true }, en TypeScript declaration merging voor getypeerde meta.

Les 1 van 413 stappen

Route-meta-velden en typering is een gratis Vue Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Vue Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Vue Academy bevat in totaal 4 lessen.

Wat zijn metavelden van routes?

Elke route kan een meta-object bevatten: willekeurige gegevens die aan de route zijn gekoppeld. Dit is ideaal voor vlaggen zoals authenticatievereisten, toegestane rollen, paginatitels of lay-outkeuzes.

Meta aan een route toevoegen

Stel de sleutel meta in op een routerecord. Je bepaalt zelf welke waarden daarin staan.

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

Meta in een guard lezen

De meest voorkomende toepassing is in een navigatieguard. router.beforeEach wordt vóór elke navigatie uitgevoerd en ontvangt de doelroute. Je kunt de meta daarvan inspecteren.

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

Niet-geauthenticeerde gebruikers omleiden

Geef vanuit de guard een routelocatie terug om om te leiden. Als je false teruggeeft, wordt de navigatie geannuleerd; als je niets of true teruggeeft, wordt de navigatie toegestaan.

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

Toegang op basis van rollen

Combineer het metadataveld roles met de rol van de huidige gebruiker om pagina's op basis van rechten af te schermen.

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

Meta wordt samengevoegd vanuit bovenliggende routes

Geneste routes nemen via to.meta meta over van hun bovenliggende routes. Daarbij worden alle overeenkomende records samengevoegd. Een onderliggende route ziet de meta van de bovenliggende route, tenzij dezelfde sleutel wordt overschreven.

Het typeprobleem

Standaard typeert TypeScript meta als een leeg object, waardoor to.meta.requiresAuth een fout geeft. Je lost dit op door declaraties samen te voegen met de typen van Vue Router.

Getypeerde meta declareren

Breid de RouteMeta-interface uit vanuit vue-router. Plaats dit in een .d.ts-bestand of in een module met een export {}.

import 'vue-router'

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

export {}

Meta wordt nu op typen gecontroleerd

Na de uitbreiding kent de compiler de structuur van meta. Typefouten zoals requireAuth worden gevonden en automatische aanvulling werkt.

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

Meta in componenten gebruiken

Binnen een component kun je de meta van de huidige route lezen via de composable useRoute() — ook daarvan zijn de typen bekend dankzij de uitbreiding.

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

Meta voor paginatitels

Een veelgebruikt patroon: bewaar een title in meta en stel document.title in vanuit een globale guard.

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

Korte kennistoets

Test je kennis van route-meta en typering.

Beantwoord dit in de interactieve les

Samenvatting

Metavelden van routes bevatten gegevens per route:

Definieer meta op routerecords, bijvoorbeeld requiresAuth, roles en title.
Lees de gegevens in router.beforeEach om navigatie te bewaken.
Meta wordt samengevoegd van bovenliggende naar onderliggende routes.
Typeer meta met het samenvoegen van declaraties voor RouteMeta uit vue-router.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 42
Lessen: 156

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Route-meta-velden en typering” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Vue Academy, waaronder “Route-meta-velden en typering”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Vue Academy bevat in totaal 4 lessen.

Wat leer ik in “Route-meta-velden en typering”?

meta: { requiresAuth: true }, en TypeScript declaration merging voor getypeerde meta. Je oefent met Vue Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Vue Academy te beginnen?

Ervaring vooraf is niet nodig. Vue Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.

Hoe lang duurt de les “Route-meta-velden en typering”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Vue Academy?

Ja. Elke les over Vue Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Vue Academy