被這個動態路由折磨了三天，記錄下經驗：
一、路由：
路由分兩塊，一是公共頁面，如登錄頁、不需要登錄、不需要權限就能訪問的頁面。另一部分是后台動態返回的權限列表。
因此，路由分為了默認路由和權限路由兩部分：
默認路由：登錄頁。
權限路由：其他所有需要控制權限的路由。
二、登錄：
1、登錄獲取登錄狀態、用戶信息、后端返回的權限列表；
2、本地localstorage緩存數據，為用戶刷新頁面保存數據。
3、進行頁面跳轉(跳到home頁)。
三、入口main.js配置：
1、在route.beforeEach中，判斷用戶是否登錄，已登錄next()，未登錄跳到登錄頁。
2、有些頁面可能只有管理員或特殊級別人員看到，可以輔助role進行判斷。router的meta里可以攜帶要求的角色權限信息。
3、處理刷新的情況：如果頁面刷新，因為store里的數據完全丟失，本地localstorage恢復數據。
四、配置路由：
很多人把配置路由放在了route.beforeEach中，在這里判斷用戶是否已經加載路由，我也用了這個方法，但折騰了好久都沒成功。最后換了個思路。
1、store里用routesAdded字段表示路由是否已經動態加載。
2、默認routesAdded值為false，登錄成功緩存數據時緩存的的值也是false。
3、由於不管是刷新頁面還是vue router push，App都會created，所以動態配置路由的工作放到了App的created里了。
4、如果store里routesAdded為false，配置動態路由。
五、動態路由：
1、遞歸過濾處理后台返回的權限列表，跟本地所有的權限路由進行比對過濾，生成一份需要動態加載的動態路由。
2、設置動態路由的默認跳轉，如果路由有children就自動跳轉到chidren的第一個路由，以此類推。
3、通過router.addRoutes動態添加路由。
4、動態路由加載完成后，將routesAdded設置為true，這樣如果不刷新頁面的話，就不用再次配置動態路由了。