vue動态路由添加，vue-router的addRoute方法實作權限控制

路由分為靜态路由和動态路由

靜态路由和動态路由的優缺點

• 1、中大型項目，采用的都是動态路由方式,因為背景導航目錄營運人員可能會新增菜單,新增菜單後，前端人員得在路由表手動填加上，這樣導航才能點選才能對應上頁面,這樣比較麻煩。
• 2、如果是動态路由，營運人員新增目錄後，因為我是動态路由擷取永遠是最新的路徑，一次性通過動态填加的方式加進去,後邊就不用管路由的事了,隻關心頁面就可以了，也是對權限管理的一種方法。

動态路由實作思路：

1. 在全局路由守衛中，先判斷token值有沒有。有的話先看是否存儲過，如果存儲過直接，頁面調用渲染，如果沒有，就請求接口,把路由表存儲下，除非沒有token,跳轉登入頁面
2. 路由表裡-把那些正常路由(不需要權限的路由，事先都寫到路由表裡)。把需要權限的路由通過​

   ​router.addRoute()​

   ​動态填加到對應的子路由裡 。
3. 動态填加的路由需要處理下。因為後端傳給你的是樹狀結構，一般前端需要把樹結構處理成清單結構(通過遞歸，不斷的擷取路徑,名字那些資訊)，填加到路由表裡。（我沒寫 ）

動态路由遇到的問題與解決方式

1. 登入後路由表裡在次加載一遍動态路由-解決第1次頁面點選找不到路徑問題,因為路由是動态生成的,登入後路由沒有被在次生成，路由表裡是空的。是以在路由裡要在次生成一遍
2. 也有可能是因為你的路由表裡有通配路由，你的書寫位置也不是入口檔案處，可能就是404頁面。
3. 登入後跳轉其它頁面,如果重新整理，頁面找不到問題？原因是路由是動态的，它是在登入後生成的，而其它頁面沒有在次生成動态路由,是以就找不到。解決辦法：可在路由裡，在生成一遍動态路由。這樣不管在背景哪個頁面，一重新整理都會先執行。(路由先走)
4. 具體方法是在入口檔案當中，通過全局前置路由守衛擷取router路由（考慮到在main.js中這個檔案比較繁瑣），新檔案重新導入

擷取主路由的一個子數組資訊。

router.beforeEach((to,from,next)=>{
    console.log(router);/* 路由對象 */
    console.log(router.options.routes);/* 前端路由執行個體對象數組(根組) */
    console.log(router.options.routes[0]);/* 需要在裡面動态添加子路由的一個根組,插入的也是這個根組對象 */
    console.log(router.options.routes[0].children);/* 擷取這個根組下的子路由數組 */
/*純粹的一次添加路由，其實通過伺服器根據權限擷取路由資訊*/
    if(router.options.routes[0].children.length == 4 && to.path!="/login"){
        router.options.routes[0].children.unshift({path:"test",component:()=>import("@/views/test.vue")})
        router.addRoute(router.options.routes[0]);
        next({
            path: to.path, // 動态添加一個新的路由
            replace: true // 重定向,為了讓剛剛添加的路由規則生效
        });

     }else{
         next();
    }   
})      

也可以寫成：

let newT = router.options.routes[0];/* 需要在裡面動态添加子路由的一個根組,插入的也是這個根組對象 */
if (newT.children.length == 4 && to.path != "/login") {//條件保護，防止全局路由守衛死循環執行。
    newT.children.unshift({
        path: "test",
        component: () => import("@/views/test.vue")
    }) //給子路由添加一條資料
    router.addRoute(newT);
    next({
        path: to.path,
        replace: true
    });
} else {
    next()
}      

next({
    path: to.path, // 動态添加一個新的路由
    replace: true // 重定向,為了讓剛剛添加的路由規則生效
});