路由分為靜態(tài)路由和動態(tài)路由

靜態(tài)路由和動態(tài)路由的優(yōu)缺點

1、中大型項目，采用的都是動態(tài)路由方式,因為后臺導(dǎo)航目錄運營人員可能會新增菜單,新增菜單后，前端人員得在路由表手動填加上，這樣導(dǎo)航才能點擊才能對應(yīng)上頁面,這樣比較麻煩。

2、如果是動態(tài)路由，運營人員新增目錄后，因為我是動態(tài)路由獲取永遠是最新的路徑，一次性通過動態(tài)填加的方式加進去,后邊就不用管路由的事了,只關(guān)心頁面就可以了，也是對權(quán)限管理的一種方法。

動態(tài)路由實現(xiàn)思路

在全局路由守衛(wèi)中，先判斷token值有沒有。有的話先看是否存儲過，如果存儲過直接，頁面調(diào)用渲染，如果沒有，就請求接口,把路由表存儲下，除非沒有token,跳轉(zhuǎn)登錄頁面

路由表里-把那些常規(guī)路由(不需要權(quán)限的路由，事先都寫到路由表里)。把需要權(quán)限的路由通過router.addRoute()動態(tài)填加到對應(yīng)的子路由里 。

動態(tài)填加的路由需要處理下。因為后端傳給你的是樹狀結(jié)構(gòu)，一般前端需要把樹結(jié)構(gòu)處理成列表結(jié)構(gòu)(通過遞歸，不斷的獲取路徑,名字那些信息)，填加到路由表里。（我沒寫 ）

動態(tài)路由遇到的問題與解決方式

1. 登錄后路由表里在次加載一遍動態(tài)路由-解決第1次頁面點擊找不到路徑問題,因為路由是動態(tài)生成的,登錄后路由沒有被在次生成，路由表里是空的。所以在路由里要在次生成一遍
2. 也有可能是因為你的路由表里有通配路由，你的書寫位置也不是入口文件處，可能就是404頁面。
3. 登錄后跳轉(zhuǎn)其它頁面,如果刷新，頁面找不到問題？原因是路由是動態(tài)的，它是在登錄后生成的，而其它頁面沒有在次生成動態(tài)路由,所以就找不到。解決辦法：可在路由里，在生成一遍動態(tài)路由。這樣不管在后臺哪個頁面，一刷新都會先執(zhí)行。(路由先走)
4. 具體方法是在入口文件當(dāng)中，通過全局前置路由守衛(wèi)獲取router路由（考慮到在main.js中這個文件比較繁瑣），新文件重新導(dǎo)入

獲取主路由的一個子數(shù)組信息。

router.beforeEach((to,from,next)=>{
    console.log(router);/* 路由對象 */
    console.log(router.options.routes);/* 前端路由實例對象數(shù)組(根組) */
    console.log(router.options.routes[0]);/* 需要在里面動態(tài)添加子路由的一個根組,插入的也是這個根組對象 */
    console.log(router.options.routes[0].children);/* 獲取這個根組下的子路由數(shù)組 */
/*純粹的一次添加路由，其實通過服務(wù)器根據(jù)權(quán)限獲取路由信息*/
    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, // 動態(tài)添加一個新的路由
            replace: true // 重定向,為了讓剛剛添加的路由規(guī)則生效
        });
     }else{
         next();
    }   
})

也可以寫成：

let newT = router.options.routes[0];/* 需要在里面動態(tài)添加子路由的一個根組,插入的也是這個根組對象 */
if (newT.children.length == 4 && to.path != "/login") {//條件保護，防止全局路由守衛(wèi)死循環(huán)執(zhí)行。
    newT.children.unshift({
        path: "test",
        component: () => import("@/views/test.vue")
    }) //給子路由添加一條數(shù)據(jù)
    router.addRoute(newT);
    next({
        path: to.path,
        replace: true
    });
} else {
    next()
}

可以看的出來：addRoute 添加一條新的路由記錄是一個對象 router.addRoute({});同時這個路由作為現(xiàn)有路由的子路由，如果路由有一個name,或者地址一樣，就會刪除之前的路由信息，重新加進去這個路由。或者已經(jīng)有一個與之名字相同的路由，它會先刪除之前的路由；

注意：新添加的路由并不會觸發(fā)新的導(dǎo)航

需要：

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

vue-router的addRoute方法實現(xiàn)權(quán)限控制

到此這篇關(guān)于Vue router的addRoute方法實現(xiàn)控制權(quán)限方法詳解的文章就介紹到這了,更多相關(guān)Vue控制權(quán)限內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論