Vue中自动生成路由配置文件覆盖路由配置

Vue中自动生成路由配置文件覆盖路由配置

设计思路

  • 读取@/views下所有index.vue如果当前文件下有包含相同路径则认为是它的子路由。
  • 但也不能就这样写死,要创建page.(ts|js)配置文件也可以更改当前的配置,Page.(ts|js)比重大于自动生成的路由配置。

踩坑点

坑点1

这里的'@/views'不能使用变量传入。

ts 复制代码
(require as any).context('@/views', true, /index\.vue$/)

坑点2

这里如果想对文件进行深度拷贝,直接使用三点(...)是不行的,这里借助了loadsh中的merge完成深度拷贝。

ts 复制代码
// 导出当前存在的路由并重新赋值
const existingRoute = routeMap[route.path];
// 当前路由存在
if (existingRoute) {
    const exportRouteConfig = context(fileInfo?.filePath).default;
    // 使用loadsh合并对象
    routeMap[route.path] = _.merge(existingRoute, exportRouteConfig);
}

代码编写

在vue中自动生成路由,并将目录下配置文件覆盖到原先路由配置。

ts 复制代码
import { routeFilenameHelper } from '@/utils/file/routeFileUtil';
import _ from 'lodash';
import { RouteRecordRaw } from 'vue-router';

// * 最终路由
const routeMap: Record<string, RouteRecordRaw> = {};

// * 所有处理的路由
const contexts = [
	{ context: (require as any).context('@/views', true, /index\.vue$/), isIndex: true },
	{ context: (require as any).context('@/views', true, /page\.(ts|js)$/), isIndex: false },
];

/**
 * 构建路由信息
 * @param context 上下文信息
 * @param isIndex 是否第一次遍历
 * @param route 路由内容
 */
function buildRouteTree(context: any, isIndex: boolean, route: any) {
	// 遍历当前子路由
	context.keys().forEach((item: string) => {
		// 获取子路由下所有文件对象格式
		const childrenFileInfo = routeFilenameHelper(item, '/');
		// 组装子路由对象
		const childrenRoute: any = {
			name: childrenFileInfo?.name,
			path: childrenFileInfo!.path,
			component: isIndex ? () => import(`@/views${childrenFileInfo?.replaceName}`) : undefined,
			children: [],
			meta: { isFullScreen: false },
		};
		// 如果当前路由对象等于当前遍历的路由子对象,将子路由推到父级路由中
		if (childrenFileInfo?.path.includes(route.path) && childrenFileInfo?.path !== route.path) {
			route.children.push(childrenRoute);
		}
	});
}

/**
 * 遍历路由信息
 * @param context 路由上下文
 * @param isIndex 是否为索引遍历
 */
const createRouteList = (context: any, isIndex: boolean) => {
	// 遍历文件下所有路径
	context.keys().forEach((filePath: string) => {
		const fileInfo = routeFilenameHelper(filePath, '/');
		// 组装路由对象
		const route: RouteRecordRaw = {
			name: fileInfo?.name,
			path: fileInfo!.path,
			component: isIndex ? () => import(`@/views${fileInfo?.replaceName}`) : undefined,
			children: [],
			meta: { isFullScreen: false },
		};
		// * 如果是第一次遍历 初始化赋值
		if (isIndex) {
			routeMap[route.path] = route;
			buildRouteTree(context, isIndex, route);
		}
		// * 读取配置文件中内容
		else {
			// 导出当前存在的路由并重新赋值
			const existingRoute = routeMap[route.path];
			// 当前路由存在
			if (existingRoute) {
				const exportRouteConfig = context(fileInfo?.filePath).default;
				// 使用loadsh合并对象
				routeMap[route.path] = _.merge(existingRoute, exportRouteConfig);
			}
		}
	});
};

// * 生成路由信息
contexts.forEach(({ context, isIndex }) => createRouteList(context, isIndex));

// * 返回生成好的路由
export const pageRoutes: Array<RouteRecordRaw> = Object.values(routeMap);
相关推荐
小蒜学长14 分钟前
基于SpringBoot+Vue的健身房管理系统的设计与实现(代码+数据库+LW)
java·数据库·vue.js·spring boot·后端
晓得迷路了19 分钟前
栗子前端技术周刊第 97 期 - Viteland:8 月回顾、Redux Toolkit 2.9、Nuxt 4.1...
前端·javascript·nuxt.js
前端双越老师22 分钟前
前端开发 AI Agent 智能体,需要掌握哪些知识?
前端·node.js·agent
EndingCoder24 分钟前
Electron 安全性最佳实践:防范常见漏洞
前端·javascript·electron·前端框架·node.js·桌面端
学前端搞口饭吃31 分钟前
React props的使用
前端·javascript·react.js
灵感__idea1 小时前
JavaScript高级程序设计(第5版):前端的能力边界
前端·javascript·程序员
华洛1 小时前
SEO还没死,GEO之战已经开始
前端·javascript·产品
IT_陈寒1 小时前
Python性能优化:5个被低估的魔法方法让你的代码提速50%
前端·人工智能·后端
As33100101 小时前
Chrome 插件开发入门指南:从基础到实践
前端·chrome
不想上班只想要钱1 小时前
vue3 ts:声明的一个数组不能将类型“boolean”分配给类型“never”。
前端·vue.js