如何配置TypeScript使vue-router的meta属性为必填项？

要让TypeScript强制每个路由都必须声明meta字段，你需要重写vue-router模块中的RouteRecordRaw接口，将原本可选的meta属性改为必填项，结合你已定义的RouteMeta类型即可实现。

具体实现代码 #

declare module 'vue-router' {
  interface RouteMeta {
    requiresAuth: boolean
    // 可添加其他你需要的必填meta字段
  }

  // 重写RouteRecordRaw，将meta设为必填
  interface RouteRecordRaw {
    meta: RouteMeta
  }
}

效果验证 #

• 错误示例：如果路由未定义meta，TypeScript会直接抛出类型错误

// ❌ 报错：缺少必要属性'meta'
const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: Home
  }
]

• 正确示例：只有显式声明符合RouteMeta类型的meta字段，才会通过类型检查

// ✅ 符合类型要求
const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: Home,
    meta: {
      requiresAuth: false
    }
  },
  {
    path: '/admin',
    component: AdminPanel,
    meta: {
      requiresAuth: true
    },
    children: [
      {
        path: 'settings',
        component: Settings,
        meta: { // 子路由同样会被强制要求定义meta
          requiresAuth: true
        }
      }
    ]
  }
]

特殊情况处理（可选） #

如果存在少数不需要meta的特殊路由，可以将RouteRecordRaw的meta改为联合类型，允许undefined或自定义空类型：

interface RouteRecordRaw {
  meta: RouteMeta | { requiresAuth?: never }
}

但此方案会放宽约束，仅在有特殊需求时使用。

内容的提问来源于stack exchange，提问作者Ansis Spruģevics