Campi meta delle route e tipizzazione
meta: { requiresAuth: true }, declaration merging di TypeScript per una meta tipizzata.
Campi meta delle route e tipizzazione è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Cosa sono i campi meta delle route
Ogni route può contenere un oggetto meta: dati arbitrari associati alla route. È perfetto per flag come i requisiti di autenticazione, i ruoli consentiti, i titoli delle pagine o le scelte del layout.
Aggiungere meta a una route
Imposti la chiave meta in un record di route. I valori dipendono interamente dalle Sue esigenze.
const routes = [
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true, roles: ['admin', 'editor'] }
}
]Leggere meta in una guardia
L'uso più comune è all'interno di una guardia di navigazione. router.beforeEach viene eseguito prima di ogni navigazione e riceve la route di destinazione, il cui meta può essere ispezionato.
router.beforeEach((to, from) => {
if (to.meta.requiresAuth) {
// check login
}
})Reindirizzare gli utenti non autenticati
Restituisca una posizione di route dalla guardia per eseguire il reindirizzamento. Restituire false annulla la navigazione; non restituire nulla o restituire true la consente.
router.beforeEach((to) => {
const auth = useAuthStore()
if (to.meta.requiresAuth && !auth.isLoggedIn) {
return { path: '/login' }
}
})Accesso basato sui ruoli
Combini il campo meta roles con il ruolo dell'utente corrente per limitare l'accesso alle pagine in base ai permessi.
router.beforeEach((to) => {
const auth = useAuthStore()
const roles = to.meta.roles
if (roles && !roles.includes(auth.role)) {
return { path: '/forbidden' }
}
})Meta viene unito dai genitori
Le route annidate ereditano i meta dalle route genitrici tramite to.meta, che unisce tutti i record corrispondenti. Una route figlia vede i meta del genitore, a meno che non sovrascriva la stessa chiave.
Il problema della tipizzazione
Per impostazione predefinita, TypeScript tipizza meta come un oggetto vuoto, quindi to.meta.requiresAuth genera un errore. Il problema si risolve con il merging delle dichiarazioni rispetto ai tipi di Vue Router.
Dichiarare meta tipizzato
Estenda l'interfaccia RouteMeta di vue-router. Inserisca questa dichiarazione in un file .d.ts o in qualsiasi modulo che contenga un export {}.
import 'vue-router'
declare module 'vue-router' {
interface RouteMeta {
requiresAuth?: boolean
roles?: string[]
}
}
export {}Ora meta viene verificato dal type checker
Dopo l'estensione, il compilatore conosce la struttura di meta. Gli errori di battitura come requireAuth vengono rilevati e il completamento automatico funziona.
router.beforeEach((to) => {
if (to.meta.requiresAuth) { /* typed as boolean | undefined */ }
})Usare meta nei componenti
All'interno di un componente può leggere i meta della route corrente tramite useRoute(), tipizzato anch'esso grazie all'estensione.
import { useRoute } from 'vue-router'
const route = useRoute()
const secure = route.meta.requiresAuthMeta per i titoli delle pagine
Un modello comune consiste nel memorizzare un title nei meta e impostare document.title da una guardia globale.
router.afterEach((to) => {
if (to.meta.title) document.title = to.meta.title
})Verifica rapida
Verifichi la Sua conoscenza dei meta delle route e della tipizzazione.
Riepilogo
I campi meta delle route contengono dati specifici per ogni route:
- Definisca i meta nei record di route (requiresAuth, roles, title).
- Li legga in router.beforeEach per controllare la navigazione.
- I meta vengono uniti dalle route genitrici a quelle figlie.
- Li tipizzi con il merging delle dichiarazioni su RouteMeta di vue-router.
Domande Frequenti
La lezione «Campi meta delle route e tipizzazione» è gratuita?
Sì — il testo completo di «Campi meta delle route e tipizzazione» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «Campi meta delle route e tipizzazione»?
meta: { requiresAuth: true }, declaration merging di TypeScript per una meta tipizzata. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Campi meta delle route e tipizzazione»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Campi meta delle route e tipizzazione
- Transizioni e animazioni delle route
- Configurazione del comportamento di scorrimento
- Navigazione programmatica e useRouter