Vue 47: Campos Meta de Ruta
easy⏱ 5 mincoursevue
Adjuntando meta a una ruta
Cada ruta puede llevar un objeto meta arbitrario — banderas, títulos, permisos, lo que tu app necesite. Es solo información adjunta al registro de la ruta, leída después vía to.meta dentro de una guardia o route.meta dentro de un componente.
const routes = [
{ path: '/dashboard', component: Dashboard, meta: { requiresAuth: true, title: 'Dashboard' } },
{ path: '/about', component: About, meta: { requiresAuth: false, title: 'About' } },
];
const router = createRouter({ history: createWebHistory(), routes });
router.beforeEach((to) => {
document.title = to.meta.title;
if (to.meta.requiresAuth && !auth.isLoggedIn()) {
return '/login';
}
});
Una guardia, muchas rutas
Compara esto con la lección 42, donde la guardia tenía un solo path fijo (/admin). Aquí la MISMA guardia protege /dashboard Y /admin — y cualquier ruta futura — solo con agregar meta: { requiresAuth: true }, sin ramas if extra.
Pruébalo
Agrega una quinta ruta con meta.requiresAuth: true y confirma que la guardia existente la protege automáticamente, sin cambios en router.beforeEach.