vue3.0基于views批量实现动态路由的方法(示例代码)

src
├── views
│   ├── Home.vue
│   ├── About.vue
│   └──...（其他组件.vue文件）
├── main.js
└── router
    └── index.js

import { createRouter, createWebHistory } from 'vue-router'
import.meta.glob('../views/*.vue') // 用于动态导入组件
const routes = []
const router = createRouter({
  history: createWebHistory(),
  routes
})
export default router

import { createRouter, createWebHistory } from 'vue-router'
import.meta.glob('../views/*.vue')
const routes = []
const addRoutesFromViewsFolder = () => {
  const componentModules = import.meta.glob('../views/*.vue')
  for (const path in componentModules) {
    const componentName = path.split('/').pop().replace('.vue', '')
    const routePath = `/${componentName.toLowerCase()}`
    const routeConfig = {
      path: routePath,
      name: componentName,
      component: componentModules[path],
      meta: {
        title: obj.componentName,
        needToken: obj.needToken
      }
    }
    routes.push(routeConfig)
  }
}
addRoutesFromViewsFolder()
const router = createRouter({
  history: createWebHistory(),
  routes
});
export default router;

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
const app = createApp(App);
app.use(router);
app.mount('#app');