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

效果图

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/620349.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

探索短链接:让网络分享更便捷

短链接是一种将长网址缩短为简洁形式的编码&#xff0c;它在互联网领域具有广泛的应用。本文将从多个方面介绍短链接的原理、类型、优势及应用场景&#xff0c;帮助您深入了解这一重要的网络技术。 短链接 | 一个覆盖广泛主题工具的高效在线平台(amd794.com) https://amd794.…

【LabVIEW FPGA 编程入门】使用FPGA IO进行编程

1.在项目中新建一个VI&#xff0c;命名为FPGA IO Test。 2. 可以直接将项目中的FPGA IO拖入程序框图中。 FPGA IO的类型&#xff1a; 数字线&#xff1a; 数字端口&#xff1a; 模拟IO&#xff1a; 其他&#xff1a; 3.如果新增加了FPGA资源&#xff0c;不是创建项目时扫描到的…

Linux centos stream9 parted

在Linux中&#xff0c;常用的磁盘管理工具包括 fdisk、parted、gdisk 等。它们可以用于创建、删除、调整分区、查看分区表等操作。 传统的MBR分区表(即主引导记录)大家都很熟悉&#xff0c;是过去我们使用windows时常见的。所支持的最大卷2T&#xff0c;且对分区有限制&#x…

漏洞复现-金和OA GetAttOut接口SQL注入漏洞(附漏洞检测脚本)

免责声明 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直接或者间接的…

Linux配置JAR包为服务实现自启动

一、实现bash脚本 1.1 绘图工具 绘图需安装idea的插件plantUML-Integration 只需要上图一个就可以&#xff0c;别的也不需要装。 启动服务的逻辑如下 关闭服务的逻辑如下 1.2 逻辑实现 在/root路径下创建entrance文件&#xff0c;实现逻辑如下 #!/usr/bin/env bash # 2>…

数学建模.皮尔逊相关系数假设检验

一、步骤 查表找临界值 二、更好的方法 三、使用条件 作图可以使用spss 这个图对不对还不好说&#xff0c;因为还没进行正态分布的验证 四、正态分布验证 &#xff08;1&#xff09;JB检验 所以之前的数据的那个表是错的&#xff0c;因为不满足正态分布 &#xff08;2&#xff…

设置了uni.chooseLocation,小程序中打不开

设置了uni.chooseLocation&#xff0c;在小程序打不开&#xff0c;点击没反应&#xff0c;地图显现不出来&#xff1b; 解决方案&#xff1a; 1.Hbuilder——微信开发者工具路径没有配置 打开工具——>设置 2.微信小程序服务端口没有开 解决方法&#xff1a;打开微信开发…

[Linux 进程(三)] 进程优先级,进程间切换,main函数参数,环境变量

文章目录 1、进程优先级1.1 Linux下查看进程优先级1.2 Linux 进程优先级的修改PRI and NItop命令配合操作更改优先级 1.3 竞争 独立 并行 并发 2、进程间切换3、Linux2.6内核进程调度队列3.1 活跃进程3.2 过期进程 4 main函数参数 — 命令行参数4.1 利用main函数的参数实现一个…

强化学习应用(一):基于Q-learning的物流配送路径规划研究(提供Python代码)

一、Q-learning算法简介 Q-learning是一种强化学习算法&#xff0c;用于解决基于马尔可夫决策过程&#xff08;MDP&#xff09;的问题。它通过学习一个值函数来指导智能体在环境中做出决策&#xff0c;以最大化累积奖励。 Q-learning算法的核心思想是使用一个Q值函数来估计每…

在CentOS上设置和管理静态HTTP网站的版本控制

在CentOS上设置和管理静态HTTP网站的版本控制是一项重要的任务&#xff0c;它可以帮助您跟踪和回滚对网站所做的更改&#xff0c;确保数据的一致性和完整性。以下是在CentOS上设置和管理静态HTTP网站的版本控制的步骤&#xff1a; 安装版本控制系统在CentOS上安装Git或其他版本…

dcat admin框架开发前台

前言 dcat admin框架是一款后台框架&#xff0c;我们需要使用laravel开发前台框架&#xff0c;dcat admin本身基于laravel&#xff0c;没必要在重新创建前台项目&#xff0c;这篇文章记录我的开发过程。 开发过程 1. 迁移数据库(非必要) 对于dcat admin来说本身存在一个后台…

GPT-4V的图片识别和分析能力原创

GPT-4V是OpenAI开发的大型语言模型&#xff0c;是GPT-4的升级版本。GPT-4V在以下几个方面进行了改进&#xff1a; 模型规模更大&#xff1a;GPT-4V的参数量达到了1.37T&#xff0c;是GPT-4的10倍。 训练数据更丰富&#xff1a;GPT-4V的训练数据包括了1.56T的文本和代码数据。 …

PyCharm连接服务器 - 2

文章目录 PyCharm连接服务器-21.如何连接服务器&#xff1f;2.如何在终端窗口打开SSH连接&#xff1f;3.Terminal终端出现中文乱码的解决办法&#xff1f;4.如何查看远程服务器的树目录结构&#xff1f;5.如何配置代码同步&#xff1f;6.如何为项目配置远程服务器中的python解释…

第5章案例课:部署Tomcat及其负载均衡

这个实验需要3台虚拟机 192.168.9.40 9.31 9.32 去FTP 下载软件包 192.168.9.40 和 192.168.9.31 都要这里面的配置[rootnode1 ~]# mount /dev/cdrom /mnt/ //挂载[rootnode1 ~]# rpm -ivh /mnt/Packages/ftp-0.17-67.el7.x86_64.rpm //下载 FTP 软件包[roo…

构建 Maven 项目时可能遇到的问题

文章目录 构建 Maven 项目时可能遇到的问题1. Maven 自动下载依赖后&#xff0c;在本地仓库中找不到2. 运行时报错如下&#xff1a;Error: java 不支持发行版本 53. 创建 Maven 项目后 pom.xml 文件为空4. 在 Settings 中 Update 了阿里云远程仓库&#xff0c;导致整个项目不能…

Windows+Qt5.14.2+android x86配置与处理adb报错

资源下载 可在部分国内镜像源下载Qt5.14.2&#xff1a;Index of /qt/archive/qt/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror其他工具 android studio:下载 Android Studio 和应用工具 - Android 开发者 | Android Developerssdk manager 、ndk、java 安装过…

【SSM框架】SpringMVC

SpringMVC简介 SpringMVC概述 SpringMvC是一种基于Java实现MVC模型的轻量级web框架 SpringMVC技术与Servlet技术功能等同&#xff0c;用于表现层功能开发 SpringMVC入门 1、导入坐标 <dependency><groupId>javax.servlet</groupId><artifactId>ja…

ENNOID-BMS从控板分析-基于LTC6813的版本

LTC6813简单说明 单体电压采集部分&#xff0c;总共可以采集18个电芯电压&#xff0c;这18个电压分别交给3个16位Delta-Sigma ADC来进行采样&#xff1b;官方手册宣称的采样误差低于2.2mV&#xff0c;采样范围为0~5V&#xff0c;所有18个电芯采样一次只要290uS时间。电压均衡部…

Tomcat简介及搭建

1、Tomcat概述 自2017年11月编程语言排行榜 Java 占比 13%&#xff0c;高居榜首&#xff0c;Tomcat也一度成为Java开发人员的首选。其开源、占用系统资源少、跨平台等特性深受广大程序员喜爱。本篇文章主要讲解如何部署 Tomcat 服务&#xff0c;根据生产环境实现多个虚拟主机的…

SpringCloud Aliba-Nacos-从入门到学废【1】

&#x1f95a;今日鸡汤&#x1f95a; 当你最倒霉地时候一定要扛住。 因为&#xff0c;那正是你运气该上升的时候。 ——《一人之下》 目录 &#x1f9c8;1.Nacos介绍 &#x1f9c2;2.Nacos服务提供者注册 &#x1f953;3.Nacos服务消费者 &#x1f32d;4.Nacos作为配置中心…