vue-router動態路由

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

1、路由：

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

　　所以，路由分爲了默認路由和權限路由兩部分：
　　默認路由：登陸頁。
　　權限路由：其餘全部須要控制權限的路由。

2、登陸：

　　一、登陸獲取登陸狀態、用戶信息、後端返回的權限列表；
　　二、本地localstorage緩存數據，爲用戶刷新頁面保存數據。
　　三、進行頁面跳轉(跳到home頁)。

3、入口main.js配置：

　　一、在route.beforeEach中，判斷用戶是否登陸，已登陸next()，未登陸跳到登陸頁。
　　二、有些頁面可能只有管理員或特殊級別人員看到，能夠輔助role進行判斷。router的meta裏能夠攜帶要求的角色權限信息。
　　三、處理刷新的狀況：若是頁面刷新，由於store裏的數據徹底丟失，本地localstorage恢復數據。

4、配置路由：

　　不少人把配置路由放在了route.beforeEach中，在這裏判斷用戶是否已經加載路由，我也用了這個方法，但折騰了很久都沒成功。最後換了個思路。

　　一、store裏用routesAdded字段表示路由是否已經動態加載。
　　二、默認routesAdded值爲false，登陸成功緩存數據時緩存的的值也是false。
　　三、因爲無論是刷新頁面仍是vue router push，App都會created，因此動態配置路由的工做放到了App的created裏了。
　　四、若是store裏routesAdded爲false，配置動態路由。

5、動態路由：

　　一、遞歸過濾處理後臺返回的權限列表，跟本地全部的權限路由進行比對過濾，生成一份須要動態加載的動態路由。　　二、設置動態路由的默認跳轉，若是路由有children就自動跳轉到chidren的第一個路由，以此類推。　　三、經過router.addRoutes動態添加路由。　　四、動態路由加載完成後，將routesAdded設置爲true，這樣若是不刷新頁面的話，就不用再次配置動態路由了。