Vue 47: Route Meta Fields
easy⏱ 5 mincoursevue
Attaching meta to a route
Every route can carry an arbitrary meta object — flags, titles, permissions, whatever your app needs. It’s just data attached to the route record, read later via to.meta inside a guard or route.meta inside a component.
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';
}
});
One guard, many routes
Compare this to lesson 42, where the guard hardcoded a single path (/admin). Here the SAME guard protects /dashboard AND /admin — and any future route — just by adding meta: { requiresAuth: true }, no extra if branches required.
Try it
Add a fifth route with meta.requiresAuth: true and confirm the existing guard protects it automatically, with no changes to router.beforeEach.