根據約定大于配置的邏輯，如果目錄結構約定俗成，前端是可以根據目錄結構動態生成路由所需要的 route 結構的，這個過程是要在編譯時 進行，生成需要的代碼，保證運行時的代碼正確即可

主流的打包工具都有對應的方法讀取文件目錄

• Webpack: require.context

• Vite: import.meta.glob

下面以Vite框架講解例子，具體的需求就需要更復雜的處理，
先進行約定：

1.單個頁面都寫在src/page文件夾下面
2. 頁面的相關信息都用page.ts定義（類似微信小程序那個頁面配置文件），這里是存儲路由的meta額外信息
3.頁面組件的入口名字都要統一叫 index.tsx
4…

這是目錄結構：

直接進入Vite的入口文件main.tsx，在路由渲染前生成routes 數組，

// mainx.tsx// 1、獲取所有的page的相關信息
let pages = import.meta.glob('./page/**/pages.ts', {eager: true, //直接獲取導出結果import: 'default' //導出的形式
})// 2、獲取路由組件index.tsx的動態導入函數(運行時動態引入組件文件)
let components = import.meta.glob('./page/**/index.tsx')// 3、生成routes數組
const routes = Object.entries(pages).map(([filePath, meta]) => {let RoutePath = filePath.replace('./page', '').replace('/pages.ts', '') || '/'let CompPath = filePath.replace('pages.ts', 'index.tsx')return {path: RoutePath,name: RoutePath.split('/').filter(Boolean).join('-') || 'index',meta,//生產環境運行的時候代碼的目錄結構是不同的，不能直接用CompPathcomponents: components[CompPath]}
})// 4、在react-dom-route中直接使用routes去生產路由
//這里我們打印看一下
console.log('======routes', routes)

可以看到結果是正確的，果然生成了要的數組，如果有特別的就在增加一下代碼滿足需求