被這個動態路由折磨了三天，記錄下經驗：

一、路由：

　　路由分兩塊，一是公共頁面，如登入頁、不需要登入、不需要許可權就能訪問的頁面。另一部分是後臺動態返回的許可權列表。

　　因此，路由分為了預設路由和許可權路由兩部分：
　　預設路由：登入頁。
　　許可權路由：其他所有需要控制權限的路由。

二、登入：

　　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，這樣如果不重新整理頁面的話，就不用再次配置動態路由了。