vue3 route meta字段扩展

使用 vue 路由时，我们经常会将一些字段信息附加到路由的 meta 对象里面，比如权限信息，菜单显示控制信息等，如下：

const routes = [
  {
    path: '/posts',
    component: PostsLayout,
    children: [
      {
        path: 'new',
        component: PostsNew,
        // 只有经过身份验证的用户才能创建帖子
        meta: { requiresAuth: true }
      },
      {
        path: ':id',
        component: PostsDetail
        // 任何人都可以阅读文章
        meta: { requiresAuth: false }
      }
    ]
  }
]

而在使用时，只需要判断这个元数据字段是否存在即可：

import {useRoute} from "vue-router";
    

const route = useRoute()

if (route.meta.requiresAuth){
   // do something
}

注意这个时候，如果TS类型严格检查情况下，编译器会报错，找不到 requiresAuth 字段的定义，这个时候为了避免报错，我们可以通过扩展 RouteMeta 接口来输入 meta 字段，方法如下：

1，在项目根目录下，新建一个 augmentations.d.ts 文件

2，放入如下配置：

export {}

declare module 'vue-router' {
    interface RouteMeta {
        // is optional
        activeMenu?: boolean
        // must be declared by every route
        showSide?: boolean
        requiresAuth?: boolean
    }
}

3, 在 tsconfig.json 的 include 选项中配置能够扫描到这个增强文件即可：

  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "./*.d.ts", // 可以扫描到根目录下的所有 d.ts 结尾的文件
    "./auto-imports.d.ts",
    "node_modules/unplugin-auto-import/auto-imports.d.ts",
  ]

4，完成之后，TypeScript 的类型检查就不会报错了