前言
都配过 路由吧 大家。✔
大多数做中后台，多多少少，都手动配过 路由配置。当然也有由框架自动生成的，比如，新建一个vue文件，自动在路由文件中，给你添加的这种，相信大家都见过。这种框架一般呢，就是约定大于配置。
约定大于配置，一般就是说，定好了文件创在哪里就是哪里，哪个文件配置什么就是什么。换句话说就是，预先定义好的标准或者规则，不能轻易变动或者绝对点说就是不能变，比如目录结构，比如命名规则，变了，那不好意思，就报错就不出效果就是错的。
一般这种，开发效率比自由没有约定的高许多，后期如果其他人来维护的话上手快许多。弊端可能就是，有些奇淫怪异的需求，需要单独拉出来判断，需要自行出奇招去解决。
这里呢，记录一下，基于文件目录结构，自动生成路由。
正文
首先，项目是vite + vue3 + vue-router，目录结构如下：
那，vite，用import.meta.glob去看指定目录下的文件，（这里多一嘴，webpack 用 require.context）：
先来看看之前我们要手动配置的路由代码:
加meta的。meta里面写的东西，有页面名，有菜单顺序，有时候还有icon图标，还可以在里面定义角色权限等一系列咱自定义的属性。
相对来说，很有规律，手写的话，重复活动太高，可能有时候还有拼错字母或路径的可能，所以说，能自动尽量自动去做。就一句话：重复的东西，尽量能自动化就自动化。
// src/router/routes.js
const pages = import.meta.glob('../views/**/page.js', {
eager: true, // 不是懒加载，立即导入
import: 'default' // default 只导入默认导出
}) // 扫描 views 目录以及目录下的所有 page.js 文件
规律性 地 把上面 获得 的文件 组成 路由：
// src/router/routes.js
// src/router/routes.js
// 1. 扫描所有页面配置
const pages = import.meta.glob("../views/**/page.js", {
eager: true,
import: "default",
});
// 2. 预加载所有页面组件
const components = import.meta.glob("../views/**/index.vue");
// 3. 生成路由配置
const routes = Object.entries(pages).map(([pagePath, meta]) => {
// 生成路由路径
const routePath = generateRoutePath(pagePath);
// 生成路由名称
const routeName = generateRouteName(routePath);
// 获取组件引用
const componentPath = pagePath.replace("page.js", "index.vue");
const component = components[componentPath];
return {
path: routePath,
name: routeName,
component,
meta,
};
});
// 辅助函数：根据文件路径生成路由路径
function generateRoutePath(pagePath) {
// 从文件路径中提取目录名
const match = pagePath.match(/\.\.\/views\/([^/]+)/);
if (!match) return "/";
const dirName = match[1];
// 如果是 index 目录，返回根路径
if (dirName === "index") return "/";
// 否则返回目录名作为路径
return `/${dirName}`;
}
// 辅助函数：根据路由路径生成路由名称
function generateRouteName(routePath) {
if (routePath === "/") return "index";
return routePath
.split("/")
.filter(Boolean)
.join("-");
}
export default routes;
index.js里面的routes就直接用这里自动的routes，所以这里要改一下：
import { createRouter, createWebHistory } from 'vue-router'
import routes from "./routes";
console.log(routes);
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes,
});
export default router
改完之后，我们来看看router打印出来的完整数据，以及路由还能不能正常显示：
看一下开发环境下：
接下来，看一下生产环境下：
build出来的：
总结
这种基于文件目录自动生成路由的，第一，重复性地工作就自动化了，第二，提效率、降错误，后期好维护。
那么，有这种，约定大于配置的现在很多人用的框架有哪些呢？1、Next.js；2、Nuxt.js等等。
