Umi从服务端动态获取路由

背景1、前提2、过程

背景

一开始我是在route.ts文件下将路由写死，需求方提出要从服务端动态获取左侧菜单，实现动态路由

1、前提

根据UmiJs官方文档中，我们可以看到运行时配置，提供了配置项，patchRoutes({ routes })和render(oldRender: Function)

patchRoutes({ routes }) ，官方demo中介绍的清清楚楚，在这我们可以获取已经配置好的路由，也可以进行修改；render(oldRender: Function) ，在这里向服务端发起请求，获取菜单配置，因为render比patchRoutes先执行；

2、过程

1、先定义一个菜单数组，用来存放从服务端获取的菜单，如： let MenuList = []; 2、在render里面，发起请求，获取菜单配置，并赋给1中定义的MenuList，在这里注意调用oldRender()，至少调用一次，否则页面将始终处于加载状态(注意位置哦)

3、获取到数据之后，我们就可以在patchRoutes({routes}) ，给获取到的配置 和 原先有的路由配置进行修改，在这里，我要将menuList中的配置放进routes，示例如下： 4、这里的parseRoute函数，我做的主要是简单的对MenuList进行遍历，将其中的自己需要的配置项插进routes，这部分要根据服务端给的数据结构进行操作

注意：到这一步 你只能动态加载路由，并不能进行切换 ————————手动分割线————————————— 这个问题也困扰了我好久，最后请教大佬

在这里对比了静态路由和以上写法，如果直接按以上写component，从日志打印中可以看到引入的component是字符串，与静态路由中的component结构不一，需要异步加载组件，使用es6引入模块来引入组件，注意组件需要具体到哪个index，否则会引起编译报错

5、引入AsyncComponent，将上面component代码修改为 附：AsyncComponent.ts

相关文章

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：