vue3+vite+Layout布局如何动态添加路由

在Vue3中，可以通过使用`createRouter`函数来创建路由实例，同时使用`createWebHashHistory`或`createWebHistory`函数来创建不同类型的路由模式。在动态添加路由的过程中，需要使用`router.addRoute`方法向路由器中添加新的路由配置项。

下面是一个示例代码，展示如何使用Vue3、Vite和Layout布局动态添加路由：

// 引入相关模块
import { createRouter, createWebHashHistory } from 'vue-router';
import Layout from '@/layout/index.vue';

// 创建路由实例
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      component: Layout,
      children: []
    }
  ]
});

// 添加动态路由
const newRoutes = [
  {
    path: '/dashboard',
    component: () => import('@/views/dashboard/index.vue'),
    name: 'Dashboard',
    meta: { title: 'Dashboard', icon: 'dashboard' }
  },
  {
    path: '/example',
    component: Layout,
    redirect: '/example/table',
    name: 'Example',
    meta: { title: 'Example', icon: 'example' },
    children: [
      {
        path: 'table',
        name: 'Table',
        component: () => import('@/views/table/index.vue'),
        meta: { title: 'Table', icon: 'table' }
      },
      {
        path: 'tree',
        name: 'Tree',
        component: () => import('@/views/tree/index.vue'),
        meta: { title: 'Tree', icon: 'tree' }
      }
    ]
  }
];

newRoutes.forEach(route => {
  router.addRoute(route);
});

export default router;

在上面的示例代码中，我们首先创建了一个包含一个空子路由的路由配置项。然后，我们定义了一个数组变量`newRoutes`，用于存放需要动态添加的路由配置项。最后，我们通过`forEach`循环遍历`newRoutes`数组，并通过`router.addRoute`方法将每个路由配置项添加到路由器中。

需要注意的是，`router.addRoute`方法只能在初始化路由时使用，无法在路由已经初始化之后使用。因此，我们需要在`createRouter`函数中初始化路由，并在路由创建完成之后再添加动态路由。