vue3如何动态生成路由

在 Vue3 中，可以通过 `createRouter()` 方法创建一个路由实例，然后使用 `routes` 属性来定义路由配置。可以通过在路由配置中动态添加路由来实现动态生成路由的功能。

以下是一个示例代码：

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('./views/Home.vue')
    }
  ]
})

// 动态添加路由
const newRoutes = [
  {
    path: '/about',
    name: 'About',
    component: () => import('./views/About.vue')
  }
]
router.addRoute(newRoutes)

export default router

在上面的代码中，首先通过 `createRouter()` 方法创建了一个路由实例 `router`，并在 `routes` 属性中定义了一个初始路由配置。然后，通过 `router.addRoute()` 方法动态添加了一个新的路由配置，从而实现了动态生成路由的功能。

需要注意的是，在 Vue3 中，路由配置的 `component` 属性应该是一个异步加载的组件，因此使用了 `() => import()` 来实现异步加载。