起因
事情是这样的，项目里需要对路由和按钮配置权限，所以会涉及到动态输出路由的问题，然后前端用的是 vue-element-admin ，看项目里是支持动态加载的，但是官方文档里对这块说得…算是语焉不详吧。
然后我翻了翻 issue 挺多人在问的，也有不少人给出了解决方案。嗯，我权当整理一下，怕年纪大容易忘。
思路
因为 vue-element-admin 主要是用于后台管理的框架，所以访问流程大致是这样子的：
- 发送登录请求
- 验证成功，返回 token
- 根据 token 返回当前用户信息，其中包括当前用户的角色，以及所属角色能访问的路由
- 前端创建一个路由组件映射表，主要作用是将后端返回的 component 的值替换为可执行的对象
- 将清洗过的路由表和前端存在的路由表合并
- 重载路由表，完成
其实核心在上面的第 4 条。根据项目 issue 里作者和其他人提供的方法，有两种映射表的创建方式：
- 前端创建创建一份静态的路由组件映射表
- 根据后端返回的路由表动态替换
我个人倾向于向后端录入一份路由表，然后再动态匹配。这样子只需要维护一份路由表，而不是一份路由表和一份路由组件映射表。