Vue3中的RouteRecordRaw

Vue3中的RouteRecordRaw是一个用于描述路由配置的接口类型。它定义了一个路由记录的基本结构，包含了路由路径、路由组件、路由元数据等属性。

一个RouteRecordRaw对象的基本结构如下：

interface RouteRecordRaw {
  path: string;
  name?: string;
  component?: Component;
  components?: Record<string, Component>;
  redirect?: string | Location | Function;
  alias?: string | string[];
  children?: RouteRecordRaw[];
  meta?: any;
  beforeEnter?: NavigationGuard;
  props?: boolean | Object | RoutePropsFunction;
  caseSensitive?: boolean;
  pathToRegexpOptions?: PathToRegexpOptions;
}

其中各属性的含义如下：

- path：路由路径，可以是一个字符串或一个正则表达式。
- name：路由名称，用于在程序中唯一识别一个路由。
- component：路由组件，可以是一个组件对象或组件异步加载函数。
- components：命名视图组件对象，用于定义多个命名视图。
- redirect：重定向路由，可以是一个字符串、一个Location对象或一个函数。
- alias：路由别名，可以是一个字符串或一个字符串数组。
- children：子路由记录数组，用于定义嵌套路由。
- meta：路由元数据，用于保存一些附加信息。
- beforeEnter：路由独享的导航守卫，用于在进入路由前执行一些操作。
- props：路由组件的props属性，可以是一个布尔值、一个对象或一个函数。
- caseSensitive：路径是否大小写敏感，默认为false。
- pathToRegexpOptions：路径转正则表达式的选项。

RouteRecordRaw对象用于描述路由配置，可以用于创建路由实例或生成路由匹配规则。在Vue3中，我们可以使用createRouter函数创建一个路由实例，例如：

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

在上面的代码中，我们定义了一个名为routes的数组，数组中包含两个RouteRecordRaw对象分别表示根路由和/about路由。然后我们使用createRouter函数创建了一个路由实例，并传入了路由配置。最后将路由实例导出，以供其他组件使用。