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>

}

.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>