项目动态路由实战

效果：

根据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 [];
};
//实现静态路由和动态路由合并