需求背景
這段時間以來，本人一直在做一個開源的後端管理系統專案，基於的是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 一起討論~，謝謝大家