Umi从服务端动态获取路由

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

注：菜鸟一枚，以上遇到一些问题请教大佬后整理，第一次写 比较粗糙，不喜勿喷，有错误欢迎提出，请求指教，谢谢~