Meta-fält och typning av routes
meta: { requiresAuth: true }, och TypeScript declaration merging för typade meta-fält.
Meta-fält och typning av routes är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.
Vad är route-metafält?
Varje route kan innehålla ett meta-objekt: godtyckliga data som är kopplade till routen. Det passar perfekt för flaggor som krav på autentisering, tillåtna roller, sidtitlar eller layoutval.
Lägga till meta i en route
Ange nyckeln meta i en route-post. Värdena bestämmer du helt själv.
const routes = [
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true, roles: ['admin', 'editor'] }
}
]Läsa meta i en guard
Den vanligaste användningen är i en navigeringsguard. router.beforeEach körs före varje navigering och tar emot målrouten, vars meta du kan inspektera.
router.beforeEach((to, from) => {
if (to.meta.requiresAuth) {
// check login
}
})Omdirigera oautentiserade användare
Returnera en route-plats från guarden för att omdirigera. Om du returnerar false avbryts navigeringen; om du inte returnerar något eller returnerar true tillåts den.
router.beforeEach((to) => {
const auth = useAuthStore()
if (to.meta.requiresAuth && !auth.isLoggedIn) {
return { path: '/login' }
}
})Rollbaserad åtkomst
Kombinera meta-fältet roles med den aktuella användarens roll för att begränsa åtkomsten till sidor utifrån behörighet.
router.beforeEach((to) => {
const auth = useAuthStore()
const roles = to.meta.roles
if (roles && !roles.includes(auth.role)) {
return { path: '/forbidden' }
}
})Meta slås ihop från överordnade routes
Underordnade routes ärver meta från sina överordnade via to.meta, som slår ihop alla matchande poster. En underordnad route ser den överordnade routens meta om den inte skriver över samma nyckel.
Typningsproblemet
Som standard typas meta av TypeScript som ett tomt objekt, så to.meta.requiresAuth orsakar ett fel. Du löser detta med deklarationssammanslagning mot Vue Routers typer.
Deklarera typad meta
Utöka gränssnittet RouteMeta från vue-router. Placera detta i en .d.ts-fil eller i valfri modul med ett export {}.
import 'vue-router'
declare module 'vue-router' {
interface RouteMeta {
requiresAuth?: boolean
roles?: string[]
}
}
export {}Nu typkontrolleras meta
Efter utökningen känner kompilatorn till formen på meta. Skrivfel som requireAuth upptäcks, och autokomplettering fungerar.
router.beforeEach((to) => {
if (to.meta.requiresAuth) { /* typed as boolean | undefined */ }
})Använda meta i komponenter
Inuti en komponent kan du läsa den aktuella routens meta via useRoute() – den är också typad tack vare utökningen.
import { useRoute } from 'vue-router'
const route = useRoute()
const secure = route.meta.requiresAuthMeta för sidtitlar
Ett vanligt mönster är att lagra en title i meta och ange document.title från en global guard.
router.afterEach((to) => {
if (to.meta.title) document.title = to.meta.title
})Snabbtest
Testa dina kunskaper om route-meta och typning.
Sammanfattning
Route-metafält innehåller data för varje route:
- Definiera meta på route-poster (requiresAuth, roles, title).
- Läs det i router.beforeEach för att skydda navigeringen.
- Meta slås ihop från överordnade till underordnade routes.
- Typa det med deklarationssammanslagning på RouteMeta från vue-router.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 42
- Lektioner
- 156
Vanliga frågor
Är lektionen ”Meta-fält och typning av routes” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Meta-fält och typning av routes”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Meta-fält och typning av routes”?
meta: { requiresAuth: true }, och TypeScript declaration merging för typade meta-fält. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Vue Academy?
Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Meta-fält och typning av routes”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Vue Academy-lektionen?
Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Meta-fält och typning av routes
- Övergångar och animationer mellan routes
- Konfigurera scrollbeteende
- Programmatisk navigering och useRouter