根据约定大于配置的逻辑，如果目录结构约定俗成，前端是可以根据目录结构动态生成路由所需要的 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,
//生产环境运行的时候代码的目录结构是不同的，不能直接用CompPath
components: components[CompPath]
}
})
// 4、在react-dom-route中直接使用routes去生产路由
//这里我们打印看一下
console.log('======routes', routes)
可以看到结果是正确的，果然生成了要的数组，如果有特别的就在增加一下代码满足需求
