vue3动态生成路由

在 Vue 3 中，可以通过动态生成路由来实现路由的灵活配置。下面是一个简单的示例代码：

首先，在你的路由配置文件中，定义一个空的路由数组，用于存放后续动态生成的路由：

// router.js

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

const routes = []

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

export default router

接下来，在需要动态生成路由的地方，可以使用遍历等方法生成路由配置，并将配置添加到之前定义的空路由数组中：

// dynamicRoutes.js

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

const dynamicRoutes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('@/views/Home.vue')
  },
  // ...其他动态生成的路由配置
]

// 在这里将动态生成的路由添加到之前定义的空路由数组中
import router from './router.js'
router.addRoute(dynamicRoutes)

export default router

最后，你可以在你的应用程序中使用 `router` 对象来访问这些动态生成的路由。例如，在你的主 App 组件中：

// App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'

export default {
  name: 'App',
  setup() {
    const router = useRouter()

    // 在这里可以访问动态生成的路由
    console.log(router.options.routes)

    return {
      router
    }
  }
}
</script>

请注意，以上示例只是一个简单的示例，实际应用中可能需要根据具体需求进行相应的修改和调整。