vue3路由配置子路由

在 Vue 3 中，你可以使用 `createRouter` 函数来创建路由实例，并使用 `createWebHistory` 或 `createWebHashHistory` 创建路由模式。在路由实例中，你可以使用 `routes` 属性来配置路由的各个路由项。

要配置子路由，你可以在父级路由项的 `children` 属性中定义子路由项的配置。每个子路由项都是一个对象，包含 `path`（路径）、`component`（组件）等属性。

以下是一个简单的示例：

import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    component: Home,
    children: [
      {
        path: 'about',
        component: About
      },
      {
        path: 'contact',
        component: Contact
      }
    ]
  }
];

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

export default router;

在上面的示例中，根路由项配置了两个子路由项：`about` 和 `contact`。当访问 `/about` 路径时，会渲染 `About` 组件；当访问 `/contact` 路径时，会渲染 `Contact` 组件。

记得在根组件中添加 `<router-view />` 标签，这样子路由才能正确地渲染到父组件中。

这只是一个简单的示例，你还可以根据自己的需求进行更复杂的子路由配置。希望能对你有所帮助！