我的vue-router+webpack之动态异步组件之旅

需求背景

这段时间以来，本人一直在做一个开源的后端管理系统项目，基于的是nodejs+mysql+vue+webpack+vue-router+vuex。

我的想法

当我做完登录界面的时候，开始想生成菜单列表，我的设想是菜单列表的每个菜单项都对应着一个组件，而每个组件都在vue-router里面，并且是点击完菜单以后才加载的，也就是所谓的异步组件。

解决问题

提起路由的异步组件，vue-router的官方给出了实现的方式：传送门，也就是所谓的懒加载。let foo = () => import('./component.vue') 。接着，我就把登录的组件用了懒加载方式实现了。但是问题接着又来了，我登录的组件是固定的，写死的，可以直接在路由初始化的时候放进路由里，但是，如果我要是后期要从后台获取菜单数据，然后再把这些菜单对应的组件放到路由里面怎么办，没错，路由的url是动态的了。给路由添加组件，vue-router里面有个函数addRoutes(),我们就用它吧！具体的实现步骤是：

• 在登录界面点击登录
• 验证用户成功以后拿到$router
• 引入获取到url的异步组件asynccomponent = () => import(/* webpackChunkName: "vue-[request]"*/ `../components${menuArray[i].url}`).catch(err => import(/* webpackChunkName: "vue-[request]"*/ 404.vue) )
• $router调用addRoutes方法将组件加进去

  总结

  在我查阅资料的过程中，还看到了一篇知乎的问题：vue-router无法实现按需加载动态组件，有什么替代方案可以解决这一需求呢？
  这个问题的描述跟我的问题比较类似，参考了高票答案，vue的作者尤雨溪，他说用到了webpack的context函数，我尝试了，确实也可以。但是我发现这种import方式更为简单，所以直接用了import方式。想了解动态import的可以参考vue-router官网给出的资料：动态 import,最后，附上我的github开源项目：BMS，希望不吝赐教！有什么问题可以加QQ群667358564 以及我的个人QQ 724003548 一起讨论~，谢谢大家