上一节我们说到，通过后端的用户权限来进行路由的动态添加，实现权限控制，这一节我们通过递归导航栏组件，实现后台权限控制导航栏，接上一节所说我们在vuex中存储了一个路由数组["/","*"]进行权限控制，这一节还是要使用这个路由数组进行导航栏的控制，开始吧。
1，下载安装element-plus
2，在main.ts里导入
3.使用element-plus的导航栏组件
这里要注意下，导航栏的代码都要抽离出来单独进行处理
4.创建一个导航栏组件，将导航栏组件抽取出来
在views里新建一个导航栏组件，取名NavList.vue，将我们的导航栏组件拿出来
在navList组件里写如下代码，进行递归
<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.这里是判断，如果有子路由，也就是有二级导航
//时，直接调用自身递归，在次循环二级导航，看是否有三级路由或者时有没有其他的内容，在把二级导航的内容通过menu传入到组件再次进行循环拆分，知道最后一层
</el-sub-menu>
<el-menu-item v-else :index="menu.path"> //4.如果没有子路由，就代表着没有下级导航，就直接渲染即可，
<span >{{menu.name}}</span>
</el-menu-item>
</div>
</template>
<script lang="ts">
import {defineComponent} from "vue"
export default defineComponent({
name:"NavList",//给组件定义好name方便自己调用自己
props:{
menu:Object,//1.获取在父组件中传入的路由信息
},
setup(props) {
const {menu}:any= props
return {
menu//2.导出供页面渲染递归
}
},
components:{
}
})
</script>最后我们将这个组件导入到我们的主页组件里 nav.vue
<template>
<div>
<el-row>
<el-col :span="12">
<el-menu :router="true"> //3.导航栏组件都需要写el-menu
<Nav-list v-for="(item,index) in nav" :key="index" :menu="item"></Nav-list>//4.将我们筛选过的动态路由数据，通过循环组件，然后把每一项都传递进去，给组件筛选递归
</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.获取筛选过的路由表，这里我就简写一下了，一般就是我们通过后端传入的["/","*"]对动态路由筛选过后的新的动态路由，和上一节路由权限控制，通过addrouter导入的内容一致
import NavList from "./NavList.vue" //2.导入我们封装的递归导航组件
import {defineComponent} from "vue"
export default defineComponent({
setup() {
return {
nav
}
},
components:{
NavList
}
})
</script>
<script scoped>
</script>这样即可以实现，动态控制导航栏，从，登录--获取token---token存本地存储---vuex调用本地存储的token---在vuex里通过token获取到路由数组---在将获取到的路由数组存放在state里----在主页里获取我们定义好的动态路由----将获取到的路由数组和动态路由做筛选，选出符合数组里的路由---将处理好的路由循环到我们的路由递归组件里。这样就实现了通过后端的权限来控制导航栏.
动态路由信息文章来源：https://www.toymoban.com/news/detail-778423.html
export default [
{
name:"首页",
path:"/home"
},
{
name:"人员管理",
Path:"/personnel",
children:[
{
name:"人员列表",
url:"/personnel/list"
}
]
}
]nav.vue 主页面组件，引入navlist.vue递归组件。文章来源地址https://www.toymoban.com/news/detail-778423.html
到了这里，关于vue3用户权限管理（导航栏权限控制）2的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
