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

靜態(tài)路由和動(dòng)態(tài)路由的優(yōu)缺點(diǎn)

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

2、如果是動(dòng)態(tài)路由，運(yùn)營(yíng)人員新增目錄后，因?yàn)槲沂莿?dòng)態(tài)路由獲取永遠(yuǎn)是最新的路徑，一次性通過(guò)動(dòng)態(tài)填加的方式加進(jìn)去,后邊就不用管路由的事了,只關(guān)心頁(yè)面就可以了，也是對(duì)權(quán)限管理的一種方法。

動(dòng)態(tài)路由實(shí)現(xiàn)思路

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

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

動(dòng)態(tài)填加的路由需要處理下。因?yàn)楹蠖藗鹘o你的是樹(shù)狀結(jié)構(gòu)，一般前端需要把樹(shù)結(jié)構(gòu)處理成列表結(jié)構(gòu)(通過(guò)遞歸，不斷的獲取路徑,名字那些信息)，填加到路由表里。（我沒(méi)寫(xiě) ）

動(dòng)態(tài)路由遇到的問(wèn)題與解決方式

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

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

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

也可以寫(xiě)成：

let newT = router.options.routes[0];/* 需要在里面動(dòng)態(tài)添加子路由的一個(gè)根組,插入的也是這個(gè)根組對(duì)象 */
if (newT.children.length == 4 && to.path != "/login") {//條件保護(hù)，防止全局路由守衛(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()
}

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

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

需要：

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

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

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

最新評(píng)論