效果:
根据antd官方
<Menu
theme="dark"
defaultSelectedKeys={["Layout-0"]}
defaultOpenKeys={["Layout-0"]}
mode="inline"
items={rts}
/>
//没有开启路由模式
到这位置,菜单已经可以正常触发路由。
App.jsx文件获取最新路由合并
分析数据得知路由菜单数据component 需要处理为动态加载组件
使用vite中获取目录下所有文件懒加载
//懒加载所有界面文件
const Modules = import.meta.glob("../views/children/**/*.jsx");
console.log(Modules);
//懒加载文件
//懒加载组件的方法 ()=>import()
function LazyLoad(path) {
let ps = Modules[`../views/children/${path}.jsx`];
console.log(ps);
return ps;
}
以上这种写法存在问题 ,组件能懒加载,存在状态管理中()=>import不解析。
解决方案是:转化为字符串在存储。那么需要使用组件需要转化为对象使用。
另一种解决方案:合并的时候进行组件懒加载,这样不需要使用转化。
定义一个合并路由方法
//合并路由
export const addRoutes = (routs) => {
//合并
return [];
};
//实现静态路由和动态路由合并