Route meta và type-safe route meta trong Vue Router 4?

// router/index.ts — declare meta type
import 'vue-router'

declare module 'vue-router' {
  interface RouteMeta {
    requiresAuth?: boolean
    roles?: string[]
    title?: string
    breadcrumb?: string
  }
}

const routes = [
  {
    path: '/admin',
    component: AdminLayout,
    meta: { requiresAuth: true, roles: ['admin'], title: 'Admin Panel' },
    children: [
      {
        path: 'users',
        component: UsersView,
        meta: { breadcrumb: 'Users Management' },
      }
    ]
  },
]

// Global guard dùng meta
router.beforeEach((to) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    return { name: 'Login', query: { redirect: to.fullPath } }
  }
})

// Component access
const route = useRoute()
console.log(route.meta.title)  // Type-safe nhờ declaration merging