react/vue vite ts項目中,自動引入路由文件、 import.meta.glob動態引入路由 無需手動引入

utils/autoRouteHelper.ts

// src/utils/autoRouteHelper.ts
import { lazy } from "react";
import withLoading from "@/components/router/withLoading";/** 自動生成某個文件夾下的子路由 */
interface RouteItem {path: string;element?: any;children?: RouteItem[];handle?: {title: string;};
}/*** 生成嵌套路由樹(保留 children 樹結構,排除 components)* @param globModules 模塊對象* @param baseDir 模塊路徑* @param titleMap 路由標題映射表* @returns 返回樹形結構路由數據*/
export function generateNestedRoutes(globModules: Record<string, () => Promise<any>>,baseDir: string,titleMap: Record<string, string> = {}
): RouteItem[] {const root: Record<string, any> = {};for (const [fullPath, loader] of Object.entries(globModules)) {if (fullPath.includes("/components/")) continue;const reg = new RegExp(`${baseDir}/(.*)/index\\.tsx$`, "i");const match = fullPath.match(reg);if (!match) continue;const subPath = match[1].replace(/\\/g, "/"); // windows 兼容const segments = subPath.split("/"); // ["pageb", "list"]let current = root;// let fullSegmentPath = "";for (let i = 0; i < segments.length; i++) {const segment = segments[i];// fullSegmentPath += (i === 0 ? "" : "/") + segment;if (!current[segment]) {current[segment] = {path: segment,childrenMap: {}};}// 最后一層,掛 element 和 titleif (i === segments.length - 1) {current[segment].element = withLoading(lazy(loader));current[segment].handle = {title: titleMap[subPath.toLowerCase()] || segment};}current = current[segment].childrenMap;}}// 將 childrenMap 轉為 children[]function convertToTree(obj: Record<string, any>): RouteItem[] {return Object.values(obj).map(({ childrenMap, ...rest }) => {const node: RouteItem = { ...rest };const children = convertToTree(childrenMap);if (children.length > 0) node.children = children;return node;});}return convertToTree(root);
}/** 合并所有模塊的默認導出,適合用于路由模塊化(eager 模式) */
export function mergeModuleRoutes(modules: Record<string, any>
): any[] {const routes: any[] = [];Object.values(modules).forEach((mod: any) => {if (Array.isArray(mod.default)) {routes.push(...mod.default);} else if (mod.default) {routes.push(mod.default);}});return routes;
}

react路由使用

目錄\router\modules\supplier.ts

import.meta.glob(‘@/pages/supplier/**/index.tsx’); 自動獲取pages/supplier目錄下的所有頁面傳遞給generateNestedRoutes返回路由不限制層級,可以一二級也可以一二三四級別等等

\router\modules
新增路由文件 如supplier.ts
import { lazy } from "react";
import withLoading from "@/components/router/withLoading";
import { generateNestedRoutes } from "@/utils/routerHelper";const personalPageModules = import.meta.glob('@/pages/supplier/**/index.tsx');const titleMap: Record<string, string> = {list: "供應商列表",// 你可以繼續添加其他路徑對應的標題
};/** 供應商管理 */
const supplier: Array<any> = [{path: "supplier",element: withLoading(lazy(() => import("@/pages/supplier/index"))),handle: {title: "供應商管理",},children:[...generateNestedRoutes(personalPageModules,"supplier",titleMap)]},
];
console.log(supplier,"供應商管理")
export default supplier;router/index.ts目錄中
const modules = import.meta.glob('./modules/*.ts', { eager: true });...mergeModuleRoutes(modules),
自動獲取modules目錄下的所有路由文件

vue路由中使用

routerHelper.ts

// src/utils/autoRouteHelper.ts
// src/utils/autoRouteHelper.ts
/*** 自動生成某個模塊文件夾下的子路由(用于 Vue Router)*/interface TitleMap {[key: string]: string;
}interface AutoRouteOptions {/** 模塊目錄,如 'views/merchantmanage' */baseDir: string;/** 路由標題映射表 */titleMap?: TitleMap;/** 排除目錄數組,如 ['components', 'common'] */excludeDirs?: string[];
}/*** 自動生成某個目錄下的子路由,支持多級目錄,支持排除子目錄* @param globModules import.meta.glob 的結果* @param options 配置項*/
export function generateChildrenRoutes(globModules: Record<string, () => Promise<any>>,options: AutoRouteOptions
) {const { baseDir, titleMap = {}, excludeDirs = [] } = options;return Object.entries(globModules).map(([fullPath, loader]) => {// 1. 判斷是否命中排除目錄const shouldExclude = excludeDirs.some((dir) =>fullPath.includes(`${baseDir}/${dir}/`));if (shouldExclude) return null;// 2. 提取 baseDir 后的子路徑部分const match = fullPath.match(new RegExp(`${baseDir}/(.+)\\.vue$`));if (!match) return null;const subPath = match[1]; // 例:user/detail/index 或 homeconst segments = subPath.split('/');// 構建路由 path,忽略 indexlet routePath = segments.map((seg) => (seg === 'index' ? '' : seg)).filter(Boolean).join('/');if (!routePath) routePath = '';const routeName = routePath.replace(/\//g, '-');return {path: routePath,name: routeName,component: loader,meta: {title: titleMap[routePath.toLowerCase()] || segments.at(-1) || routePath}};}).filter(Boolean) as any[];
}/** 合并所有模塊的默認導出,適合用于路由模塊化(eager 模式) */
export function mergeModuleRoutes(modules: Record<string, any>
): any[] {const routes: any[] = [];Object.values(modules).forEach((mod: any) => {if (Array.isArray(mod.default)) {routes.push(...mod.default);} else if (mod.default) {routes.push(mod.default);}});return routes;
}

/使用實例

const modules = import.meta.glob('@/views/merchantmanage/**/*.vue');const routes = generateChildrenRoutes(modules, {baseDir: 'views/merchantmanage',excludeDirs: ['components', 'fragments', 'common'],titleMap: {user: '用戶管理','user/detail': '用戶詳情'}
});

這樣就會排出默認components或者自定義的目錄作為路由

無需要在手動寫進去再去引入

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/915388.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/915388.shtml
英文地址,請注明出處:http://en.pswp.cn/news/915388.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Linux簡單了解歷史

一、引言Linux是計算機經久不衰的一個計算機操作系統&#xff0c;在那個unix、蘋果macOS、微軟Window神仙打架的年代拼出自己的一席之地。最初的Linux完全就是一個unix的一個翻版&#xff0c;并且最開始的版本(0.01)就是一個差不多一萬行簡單到不能再簡單的版本。那現在Linux是…

lua(xlua)基礎知識點記錄二

1. 關于lua函數傳參參數在lua中給function傳遞參數的時候一般分為兩種情況&#xff1a;值傳遞和引用傳遞值傳遞&#xff1a;值傳遞&#xff1a;數字、字符串、布爾值、nil等基本類型通過值傳遞。函數內部接收的是外部變量的副本&#xff0c;修改副本不會影響原始變量。 雖然我們…

分治算法---歸并

1、排序數組 class Solution {vector<int> tmp; public:vector<int> sortArray(vector<int>& nums) {tmp.resize(nums.size());mergeSort(nums,0,nums.size() - 1);return nums;}void mergeSort(vector<int>& nums, int left , int right){if…

《計算機網絡》實驗報告三 UDP協議分析

目 錄 1、實驗目的 2、實驗環境 3、實驗內容 3.1 DNS查詢UDP數據分析 3.2 QQ通信UDP數據分析 4、實驗結果與分析 4.1 DNS查詢UDP數據分析 4.2 QQ通信UDP數據分析 4.3 根據捕獲的數據包&#xff0c;分析UDP的報文結構&#xff0c;將UDP協議中個字段名&#xff0c;字段…

Mysql 學習總結(90)—— Mysql 8.0 25 條性能優化實戰指南

1. 內存配置優化 # my.cnf 關鍵內存參數 innodb_buffer_pool_size = 8G # 建議設置為物理內存的70-80% innodb_log_buffer_size = 64M # 日志緩沖區大小 query_cache_size = 0 # MySQL 8.0已移除,確保關閉 tmp_table_size = 256M # 臨時表大小 max_…

嵌入式通信DQ單總線協議及UART(一)

文章目錄一、DS18B20--DQ單總線1.1 單總線時序結構分析1.1.1 初始化&#xff1a;1.1.2 發送一位1.1.3 接收一位1.1.5 發送字節1.1.6 操作流程1.1.7 數據幀的理解1.1.8 數據幀的理解二、UART2.1 同步通信和異步通信2.2 雙工通信2.3 串行通信常用數據校驗方式2.3.1 奇偶檢驗2.3.2…

2025年SEVC SCI2區,利用增強粒子群算法(MR-MPSO)優化MapReduce效率和降低復雜性,深度解析+性能實測

目錄1.摘要2.MapReduce-Modified Particle Swarm Optimization (MR-MPSO)3.結果展示4.參考文獻5.算法輔導應用定制讀者交流1.摘要 大數據的迅猛增長帶來了嚴峻的數據管理挑戰&#xff0c;尤其是在數據分布不均的龐大數據庫中。由于這種不匹配&#xff0c;傳統軟件系統的效率大…

10-day07文本分類

文本分類使用場景文本分類任務 文本分類-機器學習貝葉斯算法應用在NLP中的應用 用貝葉斯公式處理文本分類任務 一個合理假設&#xff1a; 文本屬于哪個類別&#xff0c;與文本中包含哪些詞相關 任務&#xff1a; 知道文本中有哪些詞&#xff0c;預測文本屬于某類別的概率 貝葉斯…

Apache SeaTunnel詳解與部署(最新版本2.3.11)

目錄 一、概述 1.1、軟件介紹 1.2、解決問題? 1.3、軟件特性? 1.4、使用用戶 1.5、產品對比 二、架構 2.1、運行流程 2.2、連接器? 2.3、引擎 2.3.1、設計理念 2.3.2、集群管理? 2.3.3、核心功能? 2.3.4、引擎對比 三、軟件部署 3.1、Docker部署 3.2、發…

pytorch | minist手寫數據集

一、神經網絡神經網絡&#xff08;Neural Network&#xff09;是一種受生物神經系統&#xff08;尤其是大腦神經元連接方式&#xff09;啟發的機器學習模型&#xff0c;是深度學習的核心基礎。它通過模擬大量 “人工神經元” 的互聯結構&#xff0c;學習數據中的復雜模式和規律…

[C/C++安全編程]_[中級]_[如何避免出現野指針]

場景 在Rust里不會出現野指針的情況&#xff0c;那么在C里能避免嗎&#xff1f; 說明 野指針是指指向無效內存地址的指針&#xff0c;訪問它會導致未定義行為&#xff0c;可能引發程序崩潰、數據損壞或安全漏洞。它是 C/C 等手動內存管理語言中的常見錯誤&#xff0c;而 Rust…

機器學習基礎:從數據到智能的入門指南

一、何謂機器學習? 在我們的日常生活中&#xff0c;機器學習的身影無處不在。當你打開購物軟件&#xff0c;它總能精準推薦你可能喜歡的商品&#xff1b;當你解鎖手機&#xff0c;人臉識別瞬間完成&#xff1b;當你使用語音助手&#xff0c;它能準確理解你的指令。這些背后&a…

steam游戲搬磚項目超完整版實操分享

大家好&#xff0c;我是阿陽&#xff0c;今天再次最詳細的給大家綜合全面的分析講解下steam搬磚&#xff0c;可以點擊后面跳轉往期文章了再次解下阿陽網客&#xff1a;關于steam游戲搬磚項目&#xff0c;我想說&#xff01;最早是21年5月份公開朋友圈&#xff0c;初次接觸是在2…

vue2 面試題及詳細答案150道(21 - 40)

《前后端面試題》專欄集合了前后端各個知識模塊的面試題&#xff0c;包括html&#xff0c;javascript&#xff0c;css&#xff0c;vue&#xff0c;react&#xff0c;java&#xff0c;Openlayers&#xff0c;leaflet&#xff0c;cesium&#xff0c;mapboxGL&#xff0c;threejs&…

原生前端JavaScript/CSS與現代框架(Vue、React)的聯系與區別(詳細版)

原生前端JavaScript/CSS與現代框架&#xff08;Vue、React&#xff09;的聯系與區別&#xff0c;以及運行環境和條件 目錄 引言原生前端技術概述 JavaScript基礎CSS基礎 現代框架概述 Vue.jsReact 聯系與相似性主要區別對比運行環境和條件選擇建議總結 引言 在現代Web開發中&…

基于機器視覺的邁克耳孫干涉環自動計數系統設計與實現

基于機器視覺的邁克耳孫干涉環自動計數系統設計與實現 前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;忍不住分享一下給大家。點擊跳轉到網站。 摘要 本文設計并實現了一種基于機器視覺的邁克耳孫干涉環自動計數系統。該系統…

設計模式筆記(1)簡單工廠模式

最近在看程杰的《大話設計模式》&#xff0c;在這里做一點筆記。 書中主要有兩個角色&#xff1a; 小菜&#xff1a;初學者&#xff0c;學生&#xff1b; 大鳥&#xff1a;小菜表哥&#xff0c;大佬。 也按圖中的對話形式 01 簡單工廠模式 要求&#xff1a;使用c、Java、C#或VB…

Vue3 學習教程,從入門到精通,Vue 3 聲明式渲染語法指南(10)

Vue 3 聲明式渲染語法指南 本文將詳細介紹 Vue 3 中的聲明式渲染語法&#xff0c;涵蓋所有核心概念&#xff0c;并通過一個完整的案例代碼進行演示。案例代碼中包含詳細注釋&#xff0c;幫助初學者更好地理解每個部分的功能和用法。 目錄 簡介聲明式渲染基礎 文本插值屬性綁…

React hooks——useReducer

一、簡介useReducer 是 React 提供的一個高級 Hook&#xff0c;用于管理復雜的狀態邏輯。它類似于 Redux 中的 reducer 模式&#xff0c;適合處理包含多個子值、依賴前一個狀態或邏輯復雜的狀態更新場景。與 useState 相比&#xff0c;useReducer 提供更結構化的狀態管理方式。…

SEO中關于關鍵詞分類與布局的方法有那些

前邊我們說到關鍵詞挖掘肯定很重要&#xff0c;但如何把挖掘出來的關鍵詞用好更為重要&#xff0c;下邊我們就來說說很多seo剛入行的朋友比較頭疼的關鍵詞分類問題&#xff0c;為了更直觀的感受搭配了表格&#xff0c;希望可以給大家一些幫助!SEO優化之關鍵詞分類?挖掘出的關鍵…