这才是你想要的微前端方案

即只要以subPage路径开头，就默认这个路由对应的组件为子项目，从而通过AsyncComponent组件去异步获取子项目组件。

异步加载组件设计

路由设计完了，然后异步加载组件就是这个方案的灵魂了，流程是这样的：

•  通过路由，匹配到要访问的具体是那个子项目；
•  通过子项目id，获取对应的manifest.json文件；
•  通过获取manifest.json，识别到对应的静态资源(js，css)
•  加载静态资源，加载完，子项目执行注册
•  动态加载model，更新子项目组件

直接上代码吧，简单明了，资源加载的逻辑后面再详讲，需要注意的是model和component的加载顺序：

 

静态资源加载逻辑设计

开始做方案时，只是设计出按需加载的交互体验：即当业务切换到子项目路径时，开始加载子项目的资源，然后渲染页面。但后面感觉这种改动影响了业务体验，他们以前只需要加载数据时loading，现在还需要承受子项目加载loading。所以为了让业务尽量小的感知系统的重构，将按需加载换成了按需提前加载。简单点说，就是当业务登录时，我们会去遍历他的所有权限菜单，获取他拥有那些子项目的访问权限，然后提前加载这些资源。

遍历菜单，提前加载子项目资源：

（编辑：长春站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!