Champs meta des routes et typage
meta: { requiresAuth: true }, fusion de déclarations TypeScript pour typer meta
Champs meta des routes et typage est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.
Que sont les champs de métadonnées des routes ?
Chaque route peut contenir un objet meta : des données arbitraires associées à la route. C’est idéal pour des indicateurs tels que les exigences d’authentification, les rôles autorisés, les titres de page ou les choix de mise en page.
Ajouter des métadonnées à une route
Définissez la clé meta dans l’enregistrement d’une route. Les valeurs dépendent entièrement de vos besoins.
const routes = [
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true, roles: ['admin', 'editor'] }
}
]Lire les métadonnées dans une garde
Le cas d’utilisation le plus courant est une garde de navigation. router.beforeEach s’exécute avant chaque navigation et reçoit la route cible, dont vous pouvez examiner les meta.
router.beforeEach((to, from) => {
if (to.meta.requiresAuth) {
// check login
}
})Rediriger les utilisateurs non authentifiés
Renvoyez une destination de route depuis la garde pour effectuer une redirection. Renvoyer false annule la navigation ; ne rien renvoyer ou renvoyer true l’autorise.
router.beforeEach((to) => {
const auth = useAuthStore()
if (to.meta.requiresAuth && !auth.isLoggedIn) {
return { path: '/login' }
}
})Contrôle d’accès fondé sur les rôles
Associez le champ de métadonnées roles au rôle de l’utilisateur actuel pour limiter l’accès aux pages selon les autorisations.
router.beforeEach((to) => {
const auth = useAuthStore()
const roles = to.meta.roles
if (roles && !roles.includes(auth.role)) {
return { path: '/forbidden' }
}
})Les métadonnées sont fusionnées depuis les parents
Les routes imbriquées héritent des métadonnées de leurs parents via to.meta, qui fusionne tous les enregistrements correspondants. Une route enfant voit les métadonnées du parent, sauf si elle remplace la même clé.
Le problème du typage
Par défaut, TypeScript considère que meta est un objet vide, ce qui provoque une erreur avec to.meta.requiresAuth. Vous pouvez corriger cela grâce à une fusion de déclarations avec les types de Vue Router.
Déclarer des métadonnées typées
Augmentez l’interface RouteMeta de vue-router. Placez cette déclaration dans un fichier .d.ts ou dans tout module contenant un export {}.
import 'vue-router'
declare module 'vue-router' {
interface RouteMeta {
requiresAuth?: boolean
roles?: string[]
}
}
export {}Les métadonnées sont maintenant vérifiées par le typage
Après cette augmentation, le compilateur connaît la structure de meta. Les fautes de frappe comme requireAuth sont détectées et la complétion automatique fonctionne.
router.beforeEach((to) => {
if (to.meta.requiresAuth) { /* typed as boolean | undefined */ }
})Utiliser les métadonnées dans les composants
Dans un composant, vous pouvez lire les métadonnées de la route actuelle via useRoute() : elles sont également typées grâce à l’augmentation.
import { useRoute } from 'vue-router'
const route = useRoute()
const secure = route.meta.requiresAuthMétadonnées pour les titres de page
Un schéma courant consiste à stocker un title dans les métadonnées, puis à définir document.title depuis une garde globale.
router.afterEach((to) => {
if (to.meta.title) document.title = to.meta.title
})Vérification rapide
Vérifiez vos connaissances sur les métadonnées des routes et le typage.
Récapitulatif
Les champs de métadonnées des routes contiennent des données propres à chaque route :
- Définissez les métadonnées dans les enregistrements de route (requiresAuth, roles, titre).
- Lisez-les dans router.beforeEach pour protéger la navigation.
- Les métadonnées sont fusionnées des routes parentes vers les routes enfants.
- Typez-les en utilisant la fusion de déclarations sur RouteMeta de vue-router.
Questions Fréquemment Posées
La leçon « Champs meta des routes et typage » est-elle gratuite ?
Oui — le texte complet de « Champs meta des routes et typage » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Champs meta des routes et typage » ?
meta: { requiresAuth: true }, fusion de déclarations TypeScript pour typer meta Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Vue Academy ?
Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.
Combien de temps prend la leçon « Champs meta des routes et typage » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?
Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Champs meta des routes et typage
- Transitions et animations des routes
- Configuration du comportement de défilement
- Navigation programmatique et useRouter