Vue中自動生成路由配置文件覆蓋路由配置的思路詳解

更新時間：2024年05月10日 10:49:37 作者：Bunny0212

這篇文章主要介紹了Vue中自動生成路由配置文件覆蓋路由配置的思路詳解,大概思路是讀取@/views下所有index.vue如果當(dāng)前文件下有包含相同路徑則認為是它的子路由,需要的朋友可以參考下

Vue中自動生成路由配置文件覆蓋路由配置

設(shè)計思路

讀取@/views下所有index.vue如果當(dāng)前文件下有包含相同路徑則認為是它的子路由。
但也不能就這樣寫死，要創(chuàng)建page.(ts|js)配置文件也可以更改當(dāng)前的配置，Page.(ts|js)比重大于自動生成的路由配置。

踩坑點

坑點1

這里的'@/views'不能使用變量傳入。

(require as any).context('@/views', true, /index\.vue$/)

坑點2

這里如果想對文件進行深度拷貝，直接使用三點(…)是不行的，這里借助了loadsh中的merge完成深度拷貝。

// 導(dǎo)出當(dāng)前存在的路由并重新賦值
const existingRoute = routeMap[route.path];
// 當(dāng)前路由存在
if (existingRoute) {
    const exportRouteConfig = context(fileInfo?.filePath).default;
    // 使用loadsh合并對象
    routeMap[route.path] = _.merge(existingRoute, exportRouteConfig);
}

代碼編寫

在vue中自動生成路由，并將目錄下配置文件覆蓋到原先路由配置。

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 },
];
/**
 * 構(gòu)建路由信息
 * @param context 上下文信息
 * @param isIndex 是否第一次遍歷
 * @param route 路由內(nèi)容
 */
function buildRouteTree(context: any, isIndex: boolean, route: any) {
	// 遍歷當(dāng)前子路由
	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 },
		};
		// 如果當(dāng)前路由對象等于當(dāng)前遍歷的路由子對象，將子路由推到父級路由中
		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);
		}
		// * 讀取配置文件中內(nèi)容
		else {
			// 導(dǎo)出當(dāng)前存在的路由并重新賦值
			const existingRoute = routeMap[route.path];
			// 當(dāng)前路由存在
			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);

到此這篇關(guān)于Vue中自動生成路由配置文件覆蓋路由配置的文章就介紹到這了,更多相關(guān)vue自動生成路由配置文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: