扩展RouteRecordRaw

在 Vue Router 中，RouteRecordRaw 是用来描述路由的一个对象类型，它是一个可扩展的接口，你可以通过扩展它来自定义路由的配置。

以下是一个示例代码，演示了如何扩展 RouteRecordRaw 接口：

import { RouteRecordRaw } from 'vue-router'

interface CustomRouteRecordRaw extends RouteRecordRaw {
  meta?: {
    requiresAuth?: boolean // 添加一个 requiresAuth 属性，表示该路由是否需要登录才能访问
  }
}

const routes: CustomRouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: {
      requiresAuth: true // 在这里设置需要登录才能访问
    }
  },
  // ...
]

在这个示例中，我们定义了一个名为 CustomRouteRecordRaw 的接口来扩展 RouteRecordRaw 接口。我们在 CustomRouteRecordRaw 接口中添加了一个 meta 对象，用于存储一些元数据信息，比如路由是否需要登录才能访问。

接着，我们将 routes 数组的元素类型改为 CustomRouteRecordRaw，这样就可以使用我们自定义的接口来定义路由配置了。在这里，我们给 About 路由添加了一个 meta 对象，并设置 requiresAuth 为 true，表示该路由需要登录才能访问。

扩展 RouteRecordRaw 接口可以让我们更加灵活地配置路由，可以根据项目的需要添加一些自定义的属性，从而更好地满足业务需求。