网站建设后台管理登陆代码,wordpress透明插件,根据网站软件做报告,美图秀秀网页版入口根据约定大于配置的逻辑#xff0c;如果目录结构约定俗成#xff0c;前端是可以根据目录结构动态生成路由所需要的 route 结构的#xff0c;这个过程是要在编译时 进行#xff0c;生成需要的代码#xff0c;保证运行时的代码正确即可
主流的打包工具都有对应的方法读取文…根据约定大于配置的逻辑如果目录结构约定俗成前端是可以根据目录结构动态生成路由所需要的 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)
可以看到结果是正确的果然生成了要的数组如果有特别的就在增加一下代码满足需求
