起因：

当项目过大时，路由越来越多时，免不了一个文件一个文件的手动引入，这样不仅繁琐，而且导致文件过大。

解决办法：使用路由自动化导入

目录结构图

views/xxx/page.ts

export default {
  title: '首页',
  menuShow: true,
  menuSort: 1
}

router/index.ts

• webpack写法

import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import Layout from '../layout/index.vue'

// 使用webpack提供的api获取views下的所有文件信息
const reqRouter = require.context('@/views', true, /page.ts$/)

const autoLoadRoutes: Array = []
 
reqRouter.keys().forEach((key) => {
  // 获取page.ts中的信息
  let reqRouterDefault = reqRouter(key).default
  let path = key.replace('./', '').replace('/page.ts', '')
 
  autoLoadRoutes.push({
    path: `/${path}`,
    name: path,
    meta: reqRouterDefault,
    component: () => import(`@/views/${path}/index.vue`)
  })
})
 
const routes: Array = [
  {
    path: '/',
    name: 'index',
    redirect: '/home',
    component: Layout,
    children: [...autoLoadRoutes]
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login/index.vue')
  }
]
 
const router = createRouter({
  history: createWebHashHistory(),
  routes
})
 
export default router

• vite写法

import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
 
const pageModules = import.meta.glob("../pages/**/page.ts", {
  eager: true,
  import: "default",
});
 
const compModules = import.meta.glob("../pages/**/index.vue");
 
const routesMap: Array = [];
 
Object.entries(pageModules).map(([pagePath, config]) => {
  const path = pagePath.replace("../pages/", "").replace("/page.ts", "");
  const compPath = pagePath.replace("page.ts", "index.vue");
  
  routesMap.push({
    path: `/${path}`,
    name: path,
    meta: config as any,
    component: compModules[compPath],
  });
});
 
const routes: Array = [
  {
    path: "/",
    name: "index",
    redirect: "/home",
  },
  ...routesMap,
];
 
const router = createRouter({
  history: createWebHashHistory(),
  routes,
});
 
export default router;

layout.vue

结尾

以上是一个解决办法，我们的框架Django-Vue-Admin企业级后台管理系统实现了一种更高效，更简单，更方便的方式，欢迎过来一起交流和探讨。