[發(fā)明專利]一種基于vue的動(dòng)態(tài)組裝路由實(shí)現(xiàn)方法及系統(tǒng)

在審

• 申請(qǐng)?zhí)枺?/td>: 202211022311.9
• 申請(qǐng)日: 2022-08-25
• 公開（公告）號(hào): CN115408637A
• 公開（公告）日: 2022-11-29
• 發(fā)明（設(shè)計(jì)）人: 劉瑩
• 申請(qǐng)（專利權(quán)）人: 浪潮云信息技術(shù)股份公司
• 主分類號(hào): G06F16/958
• 分類號(hào): G06F16/958;G06F16/955;G06F3/0482
• 代理公司: 濟(jì)南信達(dá)專利事務(wù)所有限公司 37100
• 代理人: 姜鵬

本發(fā)明涉及VUE前端技術(shù)領(lǐng)域，具體為一種基于vue的動(dòng)態(tài)組裝路由實(shí)現(xiàn)方法包括以下步驟，進(jìn)入網(wǎng)站，建立一部分靜態(tài)路由表；用戶登錄以后進(jìn)入系統(tǒng)首頁，在beforeEach鉤子函數(shù)中判斷用戶是否已經(jīng)獲取角色信息；把菜單數(shù)據(jù)轉(zhuǎn)化成路由表需要的路由格式，注冊(cè)到路由表里面；有益效果為：本發(fā)明提出的基于VUE的動(dòng)態(tài)組裝路由實(shí)現(xiàn)方法及系統(tǒng)建立一個(gè)單獨(dú)的模塊用來管理路由，實(shí)現(xiàn)對(duì)路由的增刪改查，這樣的話，路由需要做成動(dòng)態(tài)的，由后臺(tái)保存，登錄時(shí)獲取加載，前端拿到后端返回的路由數(shù)據(jù)后，進(jìn)行一系列的轉(zhuǎn)化，轉(zhuǎn)成符合router要求的路由格式，把轉(zhuǎn)化好的路由數(shù)據(jù)，動(dòng)態(tài)的渲染到頁面的對(duì)應(yīng)位置；簡化了對(duì)路由的管理工作。

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

本發(fā)明涉及VUE前端技術(shù)領(lǐng)域，具體為一種基于vue的動(dòng)態(tài)組裝路由實(shí)現(xiàn)方法及系統(tǒng)。

背景技術(shù)

傳統(tǒng)的菜單控制方式為：前端在本地寫好路由表，以及每個(gè)路由對(duì)應(yīng)的角色，也就是哪些角色可以看到這個(gè)菜單/路由。

現(xiàn)有技術(shù)中，登錄的時(shí)候，向后端請(qǐng)求得到登錄用戶的角色(管理者、普通用戶)；利用路由攔截，根據(jù)取到的用戶角色,跟本地的路由表進(jìn)行對(duì)比，過濾出用戶對(duì)應(yīng)的路由，并利用路由進(jìn)行左側(cè)菜單渲染。

但是，由于路由是寫死在前端代碼里面的，所以每次修改路由的時(shí)候，需要開發(fā)人員手動(dòng)的修改代碼文件中的路由。并且當(dāng)路由數(shù)量過多的時(shí)候，可能會(huì)有多個(gè)路由文件，這樣找起來會(huì)更加的麻煩，不方便。

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

本發(fā)明的目的在于提供一種基于vue的動(dòng)態(tài)組裝路由實(shí)現(xiàn)方法及系統(tǒng)，建立一個(gè)單獨(dú)的模塊用來管理路由，實(shí)現(xiàn)對(duì)路由的增刪改查，這樣的話，路由需要做成動(dòng)態(tài)的，由后臺(tái)保存，登錄時(shí)獲取加載，前端拿到后端返回的路由數(shù)據(jù)后，進(jìn)行一系列的轉(zhuǎn)化，轉(zhuǎn)成符合router要求的路由格式，把轉(zhuǎn)化好的路由數(shù)據(jù)，動(dòng)態(tài)的渲染到頁面的對(duì)應(yīng)位置。

為實(shí)現(xiàn)上述目的，本發(fā)明提供如下技術(shù)方案：一種基于vue的動(dòng)態(tài)組裝路由實(shí)現(xiàn)方法，所述基于VUE的動(dòng)態(tài)組裝路由實(shí)現(xiàn)方法包括以下步驟：

進(jìn)入網(wǎng)站，建立一部分靜態(tài)路由表；

用戶登錄以后進(jìn)入系統(tǒng)首頁，在beforeEach鉤子函數(shù)中判斷用戶是否已經(jīng)獲取角色信息；

把菜單數(shù)據(jù)轉(zhuǎn)化成路由表需要的路由格式，注冊(cè)到路由表里面；

把菜單數(shù)據(jù)展示到頁面的對(duì)應(yīng)位置上，把格式化的菜單數(shù)據(jù)放到VUEX里，在對(duì)應(yīng)的菜單組件里面取到菜單數(shù)據(jù)，進(jìn)行渲染。

優(yōu)選的，靜態(tài)路由表里面包含登陸頁面，保證輸入url的時(shí)候有頁面能夠訪問。

優(yōu)選的，菜單權(quán)限獲取時(shí)，用戶登錄以后，系統(tǒng)會(huì)把用戶的一些基本信息存到緩存里面，比如token等信息；

然后進(jìn)入系統(tǒng)首頁，進(jìn)入系統(tǒng)首頁的時(shí)候會(huì)被view-router的beforeEach鉤子函數(shù)攔截住；

在beforeEach鉤子函數(shù)中判斷用戶是否已經(jīng)獲取角色信息，如果沒有獲取角色信息，那需要向后臺(tái)請(qǐng)求該用戶的角色信息；

獲取到用戶的角色信息后，通過用戶的角色信息去獲取用戶能夠展示的菜單項(xiàng)，后臺(tái)返回的這些菜單項(xiàng)包含著每個(gè)菜單項(xiàng)的路由信息；

拿到菜單項(xiàng)數(shù)據(jù)后，需要對(duì)菜單項(xiàng)數(shù)據(jù)進(jìn)行格式化。

優(yōu)選的，動(dòng)態(tài)加載路由時(shí)，把菜單數(shù)據(jù)保存到狀態(tài)管理里面，供菜單展示所用；

404組件需要放在路由表的最后面；

把處理完的路由數(shù)據(jù)放到VUEX中進(jìn)行統(tǒng)一管理，并且要把路由數(shù)據(jù)放到緩存里面進(jìn)行保存。

優(yōu)選的，數(shù)據(jù)渲染前，頁面每次跳轉(zhuǎn)的時(shí)候，先到動(dòng)態(tài)路由表里面判斷有沒有要跳轉(zhuǎn)的路由，沒有話就說明該用戶沒有這個(gè)路由權(quán)限，會(huì)跳到登錄頁面。