上一節(jié)我們說(shuō)到，通過(guò)后端的用戶權(quán)限來(lái)進(jìn)行路由的動(dòng)態(tài)添加，實(shí)現(xiàn)權(quán)限控制，這一節(jié)我們通過(guò)遞歸導(dǎo)航欄組件，實(shí)現(xiàn)后臺(tái)權(quán)限控制導(dǎo)航欄，接上一節(jié)所說(shuō)我們?cè)趘uex中存儲(chǔ)了一個(gè)路由數(shù)組["/","*"]進(jìn)行權(quán)限控制，這一節(jié)還是要使用這個(gè)路由數(shù)組進(jìn)行導(dǎo)航欄的控制，開(kāi)始吧。
1，下載安裝element-plus
????????
2，在main.ts里導(dǎo)入
?
3.使用element-plus的導(dǎo)航欄組件
?????????這里要注意下，導(dǎo)航欄的代碼都要抽離出來(lái)單獨(dú)進(jìn)行處理
4.創(chuàng)建一個(gè)導(dǎo)航欄組件，將導(dǎo)航欄組件抽取出來(lái)
? ? 在views里新建一個(gè)導(dǎo)航欄組件，取名NavList.vue，將我們的導(dǎo)航欄組件拿出來(lái)
? ??
?在navList組件里寫如下代碼，進(jìn)行遞歸
<template>
<div>
<el-sub-menu v-if="menu.children" :index="menu.path"> //3,判斷傳入的路由表中是否有子路由
<template #title>{{menu.name}}</template>
<Nav-list v-for="(item,index) in menu.children" :key="index" :menu="item"></Nav-list> //5.這里是判斷，如果有子路由，也就是有二級(jí)導(dǎo)航
//時(shí)，直接調(diào)用自身遞歸，在次循環(huán)二級(jí)導(dǎo)航，看是否有三級(jí)路由或者時(shí)有沒(méi)有其他的內(nèi)容，在把二級(jí)導(dǎo)航的內(nèi)容通過(guò)menu傳入到組件再次進(jìn)行循環(huán)拆分，知道最后一層
</el-sub-menu>
<el-menu-item v-else :index="menu.path"> //4.如果沒(méi)有子路由，就代表著沒(méi)有下級(jí)導(dǎo)航，就直接渲染即可，
<span >{{menu.name}}</span>
</el-menu-item>
</div>
</template>
<script lang="ts">
import {defineComponent} from "vue"
export default defineComponent({
name:"NavList",//給組件定義好name方便自己調(diào)用自己
props:{
menu:Object,//1.獲取在父組件中傳入的路由信息
},
setup(props) {
const {menu}:any= props
return {
menu//2.導(dǎo)出供頁(yè)面渲染遞歸
}
},
components:{
}
})
</script>最后我們將這個(gè)組件導(dǎo)入到我們的主頁(yè)組件里 nav.vue
?
<template>
<div>
<el-row>
<el-col :span="12">
<el-menu :router="true"> //3.導(dǎo)航欄組件都需要寫el-menu
<Nav-list v-for="(item,index) in nav" :key="index" :menu="item"></Nav-list>//4.將我們篩選過(guò)的動(dòng)態(tài)路由數(shù)據(jù)，通過(guò)循環(huán)組件，然后把每一項(xiàng)都傳遞進(jìn)去，給組件篩選遞歸
</el-menu>
</el-col>
</el-row>
<el-button>頭部</el-button>
<router-view></router-view>
<el-button>尾部</el-button>
</div>
</template>
<script lang="ts">
import nav from "./nav" //1.獲取篩選過(guò)的路由表，這里我就簡(jiǎn)寫一下了，一般就是我們通過(guò)后端傳入的["/","*"]對(duì)動(dòng)態(tài)路由篩選過(guò)后的新的動(dòng)態(tài)路由，和上一節(jié)路由權(quán)限控制，通過(guò)addrouter導(dǎo)入的內(nèi)容一致
import NavList from "./NavList.vue" //2.導(dǎo)入我們封裝的遞歸導(dǎo)航組件
import {defineComponent} from "vue"
export default defineComponent({
setup() {
return {
nav
}
},
components:{
NavList
}
})
</script>
<script scoped>
</script>這樣即可以實(shí)現(xiàn)，動(dòng)態(tài)控制導(dǎo)航欄，從，登錄--獲取token---token存本地存儲(chǔ)---vuex調(diào)用本地存儲(chǔ)的token---在vuex里通過(guò)token獲取到路由數(shù)組---在將獲取到的路由數(shù)組存放在state里----在主頁(yè)里獲取我們定義好的動(dòng)態(tài)路由----將獲取到的路由數(shù)組和動(dòng)態(tài)路由做篩選，選出符合數(shù)組里的路由---將處理好的路由循環(huán)到我們的路由遞歸組件里。這樣就實(shí)現(xiàn)了通過(guò)后端的權(quán)限來(lái)控制導(dǎo)航欄.
動(dòng)態(tài)路由信息文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-778423.html
export default [
{
name:"首頁(yè)",
path:"/home"
},
{
name:"人員管理",
Path:"/personnel",
children:[
{
name:"人員列表",
url:"/personnel/list"
}
]
}
]nav.vue 主頁(yè)面組件，引入navlist.vue遞歸組件。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-778423.html
到了這里，關(guān)于vue3用戶權(quán)限管理（導(dǎo)航欄權(quán)限控制）2的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
