今天小編給大家分享一下Vue3如何加載動(dòng)態(tài)菜單的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。
西安網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)公司！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項(xiàng)目制作，到程序開(kāi)發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)公司公司2013年成立到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。
為了確保在所有的 .vue 文件中都能訪問(wèn)到到菜單數(shù)據(jù)，所以選擇將菜單數(shù)據(jù)存入 vuex 中，vuex 是 vue 中一個(gè)存儲(chǔ)數(shù)據(jù)的公共地方，所有的 .vue 文件都可以從 vuex 中讀取到數(shù)據(jù)。存儲(chǔ)在 vuex 中的數(shù)據(jù)本質(zhì)上是存在內(nèi)存中，所以它有一個(gè)特點(diǎn)，就是瀏覽器按 F5 刷新之后，數(shù)據(jù)就沒(méi)了。所以在發(fā)生頁(yè)面的跳轉(zhuǎn)的時(shí)候，我們應(yīng)該去區(qū)分一下，是用戶點(diǎn)擊了頁(yè)面上的菜單按鈕之后發(fā)生了頁(yè)面跳轉(zhuǎn)還是用戶點(diǎn)擊了瀏覽器刷新按鈕（或者按了 F5）發(fā)生了跳轉(zhuǎn)。
為了實(shí)現(xiàn)這一點(diǎn)，我們需要用到 vue 中的路由導(dǎo)航守衛(wèi)功能，對(duì)于我們 Java 工程師而言，這些可能聽(tīng)起來(lái)有點(diǎn)陌生，但是你把它當(dāng)作 Java 中的 Filter 來(lái)看待就好理解了，實(shí)際上我們視頻中和小伙伴們講解的時(shí)候就是這么類比的，將一個(gè)新事物跟我們腦海中一個(gè)已有的熟悉的事物進(jìn)行類比，就很容易理解了。
vue 中的導(dǎo)航守衛(wèi)就類似一個(gè)監(jiān)控，它可以監(jiān)控到所有的頁(yè)面跳轉(zhuǎn)，在頁(yè)面跳轉(zhuǎn)中，我們可以去判斷一下 vuex 中的菜單數(shù)據(jù)是否還在，如果還在，就說(shuō)明用戶是點(diǎn)擊了頁(yè)面上的菜單按鈕完成了跳轉(zhuǎn)的，如果不在，就說(shuō)明用戶是點(diǎn)擊了瀏覽器的刷新按鈕或者是按了 F5 進(jìn)行頁(yè)面刷新的，此時(shí)我們就要趕緊去服務(wù)端重新加載一下菜單數(shù)據(jù)。
---xxxxxxxxxxxxxxxxxx---
整體上的實(shí)現(xiàn)思路就是這樣，接下來(lái)我們來(lái)看看一些具體的實(shí)現(xiàn)細(xì)節(jié)。
首先我們來(lái)看看加載的細(xì)節(jié)。
小伙伴們知道，單頁(yè)面項(xiàng)目的入口是 main.js，路由加載的內(nèi)容在 src/permission.js 文件中，該文件在 main.js 中被引入，src/permission.js 中的前置導(dǎo)航守衛(wèi)內(nèi)容如下：
重慶分公司
重慶分公司
router.beforeEach((to, from, next) => {
NProgress.start()
if (getToken()) {
to.meta.title && useSettingsStore().setTitle(to.meta.title)
/* has token*/
if (to.path === '/login') {
next({ path: '/' })
NProgress.done()
} else {
if (useUserStore().roles.length === 0) {
isRelogin.show = true
// 判斷當(dāng)前用戶是否已拉取完user_info信息
useUserStore().getInfo().then(() => {
isRelogin.show = false
usePermissionStore().generateRoutes().then(accessRoutes => {
// 根據(jù)roles權(quán)限生成可訪問(wèn)的路由表
accessRoutes.forEach(route => {
if (!isHttp(route.path)) {
router.addRoute(route) // 動(dòng)態(tài)添加可訪問(wèn)路由表
}
})
next({ ...to, replace: true }) // hack方法 確保addRoutes已完成
})
}).catch(err => {
useUserStore().logOut().then(() => {
ElMessage.error(err)
next({ path: '/' })
})
})
} else {
next()
}
}
} else {
// 沒(méi)有token
if (whiteList.indexOf(to.path) !== -1) {
// 在免登錄白名單，直接進(jìn)入
next()
} else {
next(`/login?redirect=${to.fullPath}`) // 否則全部重定向到登錄頁(yè)
NProgress.done()
}
}
})我跟大家捋一下這個(gè)前置導(dǎo)航守衛(wèi)中的思路：
首先調(diào)用 getToken 方法，這個(gè)方法實(shí)際上是去 Cookie 中拿認(rèn)證 Token，也就是登錄成功后后端返回給前端的那個(gè) JWT 字符串。
如果 getToken 方法有返回值，說(shuō)明用戶已經(jīng)登錄了，那么進(jìn)入到 if 分支中，如果 getToken 沒(méi)拿到值，說(shuō)明用戶未登錄，未登錄的話，又分為兩種情況：i：訪問(wèn)的目標(biāo)地址處于免登錄白名單中，那么此時(shí)直接訪問(wèn)即可；ii：訪問(wèn)的目標(biāo)地址不在白名單中，那么此時(shí)就跳轉(zhuǎn)到登錄頁(yè)面去，跳轉(zhuǎn)的時(shí)候同時(shí)攜帶一個(gè) redirect 參數(shù)，這樣方便在登錄成功之后，再跳轉(zhuǎn)回訪問(wèn)的目標(biāo)頁(yè)面。這個(gè)免登錄訪問(wèn)的白名單，是一個(gè)在 src/permission.js 文件中定義的變量，默認(rèn)有四個(gè)路徑，分別是 ['/login', '/auth-redirect', '/bind', '/register']。
如果 getToken 拿到了值，說(shuō)明用戶已經(jīng)登錄了，此時(shí)又分情況：如果用戶訪問(wèn)的路徑是登錄頁(yè)面，那么就給他重定向到項(xiàng)目首頁(yè)（也就是在已經(jīng)登錄的情況下，不允許用戶再次訪問(wèn)登錄頁(yè)面）；如果用戶訪問(wèn)的路徑不是登錄頁(yè)面，那么首先判斷 vuex 中的 roles 是否還有值？如果有值，說(shuō)明當(dāng)前就是用戶點(diǎn)擊了一個(gè)菜單按鈕進(jìn)行跳轉(zhuǎn)的，那么直接跳轉(zhuǎn)就行了；如果沒(méi)有值，說(shuō)明用戶是按了瀏覽器的刷新按鈕或者是 F5 按鈕刷新進(jìn)行的頁(yè)面跳轉(zhuǎn)，那么此時(shí)首先調(diào)用 getInfo 方法（位于 src/store/modules/user.js 文件中）去服務(wù)端重新加載當(dāng)前用戶的基本信息、角色信息以及權(quán)限信息，然后再調(diào)用 generateRoutes 方法（位于 src/store/modules/permission.js 文件中）去服務(wù)端加載路由信息，并將加載到的路由信息放入到 router 對(duì)象中（前提是這個(gè)路由對(duì)象不是一個(gè) http 鏈接，就是普通的路由地址）。
這就是動(dòng)態(tài)路由的加載整體思路。
在第三步驟中，涉及到兩個(gè)方法，一個(gè)是 getInfo 還有一個(gè) generateRoutes，這兩個(gè)方法也都比較關(guān)鍵，我們?cè)賮?lái)稍微看下。
首先這個(gè)加載用戶信息的方法位于 src/store/modules/user.js 文件中，換言之，這些用戶的基本信息加載到之后，是存儲(chǔ)在 vuex 中的，如果刷新瀏覽器這些數(shù)據(jù)就會(huì)丟失：
getInfo() {
return new Promise((resolve, reject) => {
getInfo().then(res => {
const user = res.user
const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar;
if (res.roles && res.roles.length > 0) { // 驗(yàn)證返回的roles是否是一個(gè)非空數(shù)組
this.roles = res.roles
this.permissions = res.permissions
} else {
this.roles = ['ROLE_DEFAULT']
}
this.name = user.userName
this.avatar = avatar;
resolve(res)
}).catch(error => {
reject(error)
})
})
},方法的邏輯其實(shí)倒沒(méi)啥好說(shuō)的，結(jié)合服務(wù)端返回的 JSON 格式，應(yīng)該就很好理解了（部分 JSON）：
{
"permissions":[
"*:*:*"
],
"roles":[
"admin"
],
"user":
"userName":"admin",
"nickName":"TienChin健身",
"avatar":"",
}
}另外再?gòu)?qiáng)調(diào)下，之前在 vhr 中，我們是將請(qǐng)求封裝成了一個(gè) api.js 文件，里邊有常用的 get、post、put 以及 delete 請(qǐng)求等，然后在需要使用的地方，直接去調(diào)用這些方法發(fā)送請(qǐng)求即可，但是在 TienChin 中，腳手架的封裝是將所有的請(qǐng)求都提前統(tǒng)一封裝好，在需要的時(shí)候直接調(diào)用封裝好的方法，連請(qǐng)求地址都不用傳遞了（封裝的時(shí)候就已經(jīng)寫(xiě)死了），所以小伙伴們看上面的 getInfo 方法只有方法調(diào)用，沒(méi)有傳遞路徑參數(shù)等。
generateRoutes 方法則位于 src/store/modules/permission.js 文件中，這里值得說(shuō)道的地方就比較多了：
generateRoutes(roles) {
return new Promise(resolve => {
// 向后端請(qǐng)求路由數(shù)據(jù)
getRouters().then(res => {
const sdata = JSON.parse(JSON.stringify(res.data))
const rdata = JSON.parse(JSON.stringify(res.data))
const defaultData = JSON.parse(JSON.stringify(res.data))
const sidebarRoutes = filterAsyncRouter(sdata)
const rewriteRoutes = filterAsyncRouter(rdata, false, true)
const defaultRoutes = filterAsyncRouter(defaultData)
const asyncRoutes = filterDynamicRoutes(dynamicRoutes)
asyncRoutes.forEach(route => { router.addRoute(route) })
this.setRoutes(rewriteRoutes)
this.setSidebarRouters(constantRoutes.concat(sidebarRoutes))
this.setDefaultRoutes(sidebarRoutes)
this.setTopbarRoutes(defaultRoutes)
resolve(rewriteRoutes)
})
})
}首先大家看到，服務(wù)端返回的動(dòng)態(tài)菜單數(shù)據(jù)解析了三次，分別拿到了三個(gè)對(duì)象，這三個(gè)對(duì)象都是將來(lái)要用的，只不過(guò)使用的場(chǎng)景不同，下面結(jié)合頁(yè)面的顯示跟大家細(xì)說(shuō)。
首先是調(diào)用 filterAsyncRouter 方法，這個(gè)方法的核心作用就是將服務(wù)端返回的 component 組件動(dòng)態(tài)加載為一個(gè) component 對(duì)象。不過(guò)這個(gè)方法在調(diào)用的過(guò)程中，后面還有兩個(gè)參數(shù)，第二個(gè)是 lastRouter 在該方法中并無(wú)實(shí)質(zhì)性作用；第三個(gè)參數(shù)則主要是說(shuō)是否需要對(duì) children 的 path 進(jìn)行重寫(xiě)。小伙伴們知道，服務(wù)端返回的動(dòng)態(tài)菜單的 path 屬性都是只有一層的，例如一級(jí)菜單系統(tǒng)管理的 path 是 system，二級(jí)菜單用戶管理的 path 則是 user，那么用戶管理最終訪問(wèn)的 path 就是 system/path，如果第三個(gè)參數(shù)為 true，則會(huì)進(jìn)行 path 的重寫(xiě)，將 path 最終設(shè)置正確。
所以這里的 sidebarRoutes 和 defaultRoutes 只是能用于菜單渲染（因?yàn)檫@兩個(gè)里邊的菜單 path 不對(duì)），而最終的頁(yè)面跳轉(zhuǎn)要通過(guò) rewriteRoutes 才可以實(shí)現(xiàn)。
除了服務(wù)端返回的動(dòng)態(tài)菜單，前端本身也定義了一些基礎(chǔ)菜單，前端的基礎(chǔ)菜單分為兩大類，分別是 constantRoutes 和 dynamicRoutes，其中 constantRoutes 是固定菜單，也就是一些跟用戶權(quán)限無(wú)關(guān)的菜單，例如 404 頁(yè)面、首頁(yè)等；dynamicRoutes 是動(dòng)態(tài)菜單，也就是也根據(jù)用戶權(quán)限來(lái)決定是否展示的菜單，例如分配用戶、字典數(shù)據(jù)、調(diào)度日志等等。
filterDynamicRoutes 方法則是將前端提前定義好的 dynamicRoutes 菜單進(jìn)行過(guò)濾，找出那些符合當(dāng)前用戶權(quán)限的菜單將之添加到路由中（這些菜單都不需要在菜單欄渲染出來(lái)）。
接下來(lái)涉及到四個(gè)不同的保存路由數(shù)據(jù)的變量，分別是 routes、addRoutes（經(jīng)松哥分析，這個(gè)變量并無(wú)實(shí)際作用，可以刪除之）、defaultRoutes、topbarRouters 以及 sidebarRouters，四個(gè)路由變量的作用各有不同：
routes：
routes 中保存的是 constantRoutes 以及服務(wù)端返回的動(dòng)態(tài)路由數(shù)據(jù)，并且這個(gè)動(dòng)態(tài)路由數(shù)據(jù)中的 path 已經(jīng)完成了重寫(xiě)，所以這個(gè) routes 主要用在兩個(gè)地方：
首頁(yè)的搜索上：首頁(yè)的搜索也可以按照路徑去搜索，所以需要用到這個(gè) routes，如下圖：
用在 TagsView，這個(gè)地方也需要根據(jù)頁(yè)面渲染不同的菜單，也是用的 routes：
sidebarRouters：
這個(gè)就是大家所熟知的側(cè)邊欄菜單了，具體展示是 constantRoutes+服務(wù)端返回的菜單，不過(guò)這些 constantRoutes 基本上 hidden 屬性都是 false，渲染的時(shí)候是不會(huì)被渲染出來(lái)的。
topbarRouters：
這個(gè)是用在 TopNav 組件中，這個(gè)是將系統(tǒng)的一級(jí)菜單在頭部顯示出來(lái)的，如下圖：
一級(jí)菜單在頂部顯示，左邊顯示的都是二級(jí)三級(jí)菜單，那么頂部菜單的渲染，用的就是這個(gè) topbarRouters。
defaultRoutes：
想要開(kāi)啟頂部菜單，需要在 src/layout/components/Settings/index.vue 組件中設(shè)置，如下圖：
開(kāi)啟頂部菜單之后，點(diǎn)擊頂部菜單，左邊菜單欄會(huì)跟著切換，此時(shí)就是從 defaultRoutes 中遍歷出相關(guān)的菜單設(shè)置給 sidebarRouters。
好了，這就是這四個(gè) routes 變量的作用，老實(shí)說(shuō)，腳手架中這塊的代碼設(shè)計(jì)有點(diǎn)混亂，沒(méi)必要搞這么多變量，等松哥抽空給大家優(yōu)化下。
generateRoutes 方法最終會(huì)返回 rewriteRoutes 變量到前面說(shuō)的那個(gè)前置導(dǎo)航守衛(wèi)中，最終前置導(dǎo)航守衛(wèi)將數(shù)據(jù)添加到 router 中。
菜單的渲染都是在 src/layout/components/Sidebar/index.vue 中完成的，看了下都是常規(guī)操作，沒(méi)啥好說(shuō)的。
以上就是“Vue3如何加載動(dòng)態(tài)菜單”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
