[發(fā)明專利]基于Vue的多級(jí)路由動(dòng)態(tài)加載的實(shí)現(xiàn)方法

有效

• 申請(qǐng)?zhí)枺?/td>: 202110571278.4
• 申請(qǐng)日: 2021-05-25
• 公開(kāi)（公告）號(hào): CN113254100B
• 公開(kāi)（公告）日: 2023-08-01
• 發(fā)明（設(shè)計(jì)）人: 吳雙;宋艦;鄧文科;鮮青林;曾輝;黃睿蔥
• 申請(qǐng)（專利權(quán)）人: 四川虹魔方網(wǎng)絡(luò)科技有限公司
• 主分類(lèi)號(hào): G06F9/445
• 分類(lèi)號(hào): G06F9/445;G06F16/958
• 代理公司: 四川省天策知識(shí)產(chǎn)權(quán)代理有限公司 51213
• 代理人: 張秀敏

本發(fā)明公開(kāi)了基于Vue的多級(jí)路由動(dòng)態(tài)加載的實(shí)現(xiàn)方法，前端配置靜態(tài)路由；web端創(chuàng)建菜單，指定不同層級(jí)菜單的組件路徑；用戶登錄，從服務(wù)端獲取角色權(quán)限對(duì)應(yīng)的路由數(shù)據(jù)并返回前端；前端通過(guò)路由懶加載方法將路由數(shù)據(jù)中的組件字符串轉(zhuǎn)換為對(duì)象，根據(jù)映射規(guī)則將不同層級(jí)的路由與組件建立映射；前端依據(jù)vue?router的addRoutes方法動(dòng)態(tài)加載路由，得到處理后的路由表；瀏覽器根據(jù)處理后的路由表進(jìn)行展示。本發(fā)明在采用后臺(tái)動(dòng)態(tài)加載路由，只需要在web端創(chuàng)建菜單，當(dāng)用戶登錄后，獲取對(duì)應(yīng)的權(quán)限路由表，前端只需將組件依據(jù)規(guī)則映射成組件對(duì)象即可，易操作且便于維護(hù)。

技術(shù)領(lǐng)域

本發(fā)明涉及web前端技術(shù)領(lǐng)域，具體的說(shuō)，是基于Vue的多級(jí)路由動(dòng)態(tài)加載的實(shí)現(xiàn)方法。

背景技術(shù)

在單頁(yè)面富應(yīng)用(SPA)的場(chǎng)景下，采用前后端分離的開(kāi)發(fā)模式，前端路由配置尤為重要。路由加載一般采用兩種方式，靜態(tài)加載和動(dòng)態(tài)加載。前者是前端寫(xiě)好全部靜態(tài)路由，用戶登錄后依據(jù)角色權(quán)限篩選對(duì)應(yīng)的路由表，其核心是前端控制路由；后者是用戶登錄后通過(guò)調(diào)用接口獲取當(dāng)前用戶對(duì)應(yīng)的權(quán)限路由表，前端獲取數(shù)據(jù)后動(dòng)態(tài)加載至路由表，其過(guò)程是由后端處理路由。

微服務(wù)場(chǎng)景下，路由匹配列表層級(jí)多、數(shù)據(jù)大，如果采用靜態(tài)路由，需在路由匹配列表中將路由和組件進(jìn)行一一映射，如果多級(jí)菜單，則會(huì)出現(xiàn)多個(gè)層級(jí)的嵌套，層級(jí)復(fù)雜不易維護(hù)。

對(duì)于路由層級(jí)多，權(quán)限設(shè)置復(fù)雜，通過(guò)后臺(tái)傳遞路由表實(shí)現(xiàn)動(dòng)態(tài)路由更便捷、易維護(hù)。本發(fā)明結(jié)合web端多級(jí)菜單配置，提出了一種基于vue的多級(jí)路由動(dòng)態(tài)加載的實(shí)現(xiàn)方法。

發(fā)明內(nèi)容

本發(fā)明的目的在于提供一種基于Vue的多級(jí)路由動(dòng)態(tài)加載的實(shí)現(xiàn)方法，用于解決現(xiàn)有技術(shù)中靜態(tài)路由在路由匹配列表中將路由和組件進(jìn)行一一映射時(shí)，如果涉及多級(jí)菜單，則會(huì)出現(xiàn)多個(gè)層級(jí)的嵌套，層級(jí)復(fù)雜且不易維護(hù)的問(wèn)題。

本發(fā)明通過(guò)下述技術(shù)方案解決上述問(wèn)題：

一種基于Vue的多級(jí)路由動(dòng)態(tài)加載的實(shí)現(xiàn)方法，包括：

步驟S100：前端配置靜態(tài)路由：利用vue-router創(chuàng)建路由實(shí)例，在路由實(shí)例中設(shè)置靜態(tài)路由匹配列表，其包括根路由、二級(jí)路由和三級(jí)路由，二級(jí)路由包括登錄頁(yè)面和布局頁(yè)面，三級(jí)路由包括首頁(yè)；目的是將與用戶權(quán)限無(wú)關(guān)的路由提前配置好，方便后續(xù)步驟中將與用戶權(quán)限相關(guān)的路由動(dòng)態(tài)加載至路由表上。

步驟S200：web端創(chuàng)建菜單，根據(jù)不同層級(jí)加載路由的方式，指定不同層級(jí)菜單的組件路徑；

步驟S300：用戶登錄，服務(wù)器獲取角色權(quán)限對(duì)應(yīng)的路由數(shù)據(jù)并返回前端；

步驟S400：前端通過(guò)AJAX獲取路由數(shù)據(jù)，并采用路由懶加載方法加載映射組件。因?yàn)榉?wù)端返回路由表中的組件是字符串格式，是router實(shí)例中組件為對(duì)象，因此通過(guò)懶加載的方式進(jìn)行格式轉(zhuǎn)換，將路由數(shù)據(jù)中的組件字符串轉(zhuǎn)換為對(duì)象，根據(jù)映射規(guī)則將不同層級(jí)的路由與組件建立映射；

步驟S500：前端依據(jù)vue-router的addRoutes方法動(dòng)態(tài)加載路由，得到處理后的路由表；

步驟S600：瀏覽器將處理后的路由表呈現(xiàn)給用戶終端。

所述映射規(guī)則為：

根路由，映射router-view/占位符；

二級(jí)路由，映射組件從低到高分別為可渲染組件、layout組件；

三級(jí)路由，映射組件從低到高分別為可渲染組件、layout組件、router-view/占位符；

……

多級(jí)路由，映射組件從低到高分布為可渲染組件、layout組件、router-view/占位符、router-view/占位符、……。