vue3实现动态侧边菜单栏的几种方式简单总结
作者：村长在路上
在做开发中都会遇到的需求,每个用户的权限是不一样的,那他可以访问的页面(路由)可以操作的菜单选项是不一样的,如果由后端控制,我们前端需要去实现动态路由,动态渲染侧边菜单栏,这篇文章主要给大家介绍了关于vue3实现动态侧边菜单栏的几种方式,需要的朋友可以参考下
基于自建json数据的动态侧边菜单栏
后端接口json数据
src/api/menuList.js
const menuList = [
{
url: '',
name: '人员管理',
icon: 'icon-renyuan',
menuId: 1,
children: [
{
url: '/user',
name: '用户管理',
icon: 'icon-jurassic_user',
menuId: 1001,
children: []
},
{
url: '/role',
name: '角色管理',
icon: 'icon-jiaose',
menuId: 1002,
children: []
}
]
},
{
url: '/device',
name: '设备管理',
icon: 'icon-shebei',
menuId: 2
}
]
export default menuList;
home.vue页面上面显示该类型的菜单
在home.vue页面中import 这个文件
遍历数组中的menulist 中的json数据，因为只遍历到第二层 因此只支持两层目录 即父-子
<template>
<div class="common-layout">
<--! 基于elementplus的侧边栏标签-->
<el-aside width="400px">
<el-row class="tac">
<el-col :span="12">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
:router="true"
>
<el-sub-menu index="1" v-for="item in menuList" :key="item.id">
<!--一级模板区域 -->
<template #title>
<el-icon class="item.iconCls"/>
<span>{{ item.name}}</span>
</template>
<el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="item.id">
<template #title>
<span>{{subItem.name}}</span>
</template>
</el-menu-item>
</el-sub-menu>
</el-menu>
</el-col>
</el-row>
</el-aside>
</el-container>
</el-container>
</div>
</template>
<script>
import menuList from "@/api/mockdata/menList"; //根据自己的路径来
export default {
name: "Home",
data(){
return {
menuList
}
},
}
</script>
<style >
</style>
效果图
基于后端接口数据 实现动态侧边菜单栏 vue3+elementplus
后端菜单接口数据
目录结构为 父目录 系统管理 子目录 广告管理 APP上传。 遍历json数据 在v-for页面显示 name 名称
http://localhost:8000/api/menu
[
{
"id": 6,
"url": "/",
"path": "/home",
"component": "Home",
"name": "系统管理",
"iconCls": "fa fa-windows",
"enabled": true,
"children": [
{
"id": 30,
"url": null,
"path": "/sys/ad",
"component": "SysAd",
"name": "广告管理",
"iconCls": "fa fa-ad",
"meta": null,
"parentId": 6,
"enabled": true,
"children": null,
"roles": null
},
{
"id": 7,
"url": null,
"path": "/sys/app",
"component": "SysApp",
"name": "App上传",
"iconCls": "fa-solid fa-circle-arrow-up",
"meta": null,
"parentId": 6,
"enabled": true,
"children": null,
"roles": null
}
],
"roles": null
}
]在 home.vue中 显示此json数据形成的菜单
vue3包含的data() mounted() methods() 方法被一个 setup方法全包了
ref可以是对象也可以是变量 reactive中必须是对象。。
ref使用变量 不管是获取还是使用 都需要加上 .value
<template>
<div class="common-layout">
<el-container>
<el-aside width="400px">
<el-row class="tac">
<el-col :span="12">
<el-menu
default-active="2"
class="el-menu-vertical-demo"
:router="true"
>
<el-sub-menu index="1" v-for="item in menuList" :key="item.id">
<!--一级模板区域 -->
<template #title>
<el-icon class="item.iconCls"/>
<span>{{ item.name}}</span>
</template>
<!-- 二级目录遍历 json中的children 显示name:中的内容-->
<el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="item.id">
<template #title>
<span>{{subItem.name}}</span>
</template>
</el-menu-item>
</el-sub-menu>
</el-menu>
</el-col>
</el-row>
</el-aside>
</el-container>
</el-container>
</div>
</template>
<script>
import { Document, Location, Setting, Burger} from "@element-plus/icons-vue";
import axios from "axios";
import {onMounted,ref } from 'vue'
import {useStore} from "vuex";
export default {
name: "Home",
components: {Burger, Setting, Document, Location},
setup() {
// vue3推荐使用ref 实现响应式数据 数据实时显示 将后端接受的数据赋值给ref
const menuList = ref();
onMounted(()=>{
axios.get("/api/menu").then(res =>{
console.log("onMounted")
const data = res.data
console.log(data)
menuList.value = data
})
})
return {
menuList
}
},
}
</script>
<style >
.homeHeader{
background-color: #04befe;
/*弹性展示*/
display: flex;
/* 居中对齐弹性盒子的各项 div 元素*/
align-items: center;
}
.mainTitle{
/* 规定元素中文本的水平对齐方式 居中*/
text-align: center;
/* 颜色为深空色*/
color: deepskyblue;
/* 字体大小*/
font-size: 30px;
/* 距离顶部的距离为 20px 数值越大下降位置越多*/
//padding-top: 20px;
}
.headerTitle{
/*字体大小*/
font-size: 20px;
/* 字体颜色*/
color: #fffff9;
}
//标签换行样式 vue3中不支持标签页换行
.text-wrapper {
display: inline-block;
word-break: break-all;
word-wrap: break-word
}
</style>效果图
总结
到此这篇关于vue3实现动态侧边菜单栏的几种方式的文章就介绍到这了,更多相关vue3动态侧边菜单栏实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！