vuejs3+elementPlus后台管理系统，左侧菜单栏制作，跳转、默认激活菜单

默认激活菜单,效果： 

默认激活菜单，效果1：

默认激活菜单，效果2：

跳转链接效果：

制作：

<script setup>
import {useUserStore} from "@/stores/userStore.js";
import {ref} from "vue";const userStore = useUserStore()
//默认激活菜单
const defaultMenu = ref('/home')
</script><template><el-menuactive-text-color="#409EFF"background-color="#32363f":default-active="defaultMenu"text-color="#fff"@open="handleOpen"@close="handleClose"router><el-sub-menu :index="ind+1" v-for="(menuItem,ind) in userStore.userInfo.menus" :id="menuItem.id"><template #title><el-icon><component :is="menuItem.icon"></component></el-icon><span>{{menuItem.name}}</span></template><el-menu-item :index="childItem.frontpath" v-for="(childItem,childInd ) in menuItem.child"><template #title><el-icon><component :is="childItem.icon"></component></el-icon><span>{{childItem.name}}</span></template></el-menu-item></el-sub-menu></el-menu>
</template><style scoped></style>

代码解析，实现路径跳转：

代码解析，默认激活菜单

数据格式：

{"status": 200,"id": 3,"username": "admin","avatar": "http:xxxxxxxxxxx.com/public/642438a225ad5.jpg","super": 1,"role": {"id": 2,"name": "超级管理员"},"menus": [{"id": 598,"rule_id": 0,"status": 1,"create_time": "2024-06-11 23:22:32","update_time": "2024-06-19 22:32:52","name": "后台首页","desc": null,"frontpath": "","condition": "","menu": 1,"order": 1,"icon": "House","method": "","child": [{"id": 599,"rule_id": 598,"status": 1,"create_time": "2024-06-11 23:24:51","update_time": "2024-06-19 22:32:55","name": "后台首页","desc": null,"frontpath": "/home","condition": "","menu": 1,"order": 50,"icon": "AddLocation","method": "","child": []}]},{"id": 562,"rule_id": 0,"status": 1,"create_time": "2024-05-29 21:18:00","update_time": "2024-06-11 23:19:37","name": "图库管理","desc": null,"frontpath": "","condition": "调度","menu": 1,"order": 2,"icon": "Opportunity","method": "POST","child": [{"id": 563,"rule_id": 562,"status": 1,"create_time": "2024-05-29 21:19:18","update_time": "2024-05-30 14:17:37","name": "图库管理","desc": null,"frontpath": "/image/list","condition": "","menu": 1,"order": 2,"icon": "PictureFilled","method": "","child": [{"id": 571,"rule_id": 563,"status": 1,"create_time": "2024-05-30 14:16:47","update_time": "2024-05-30 14:16:47","name": "11","desc": null,"frontpath": "11","condition": "","menu": 1,"order": 50,"icon": "AddLocation","method": "","child": [{"id": 597,"rule_id": 571,"status": 1,"create_time": "2024-06-11 17:06:34","update_time": "2024-06-11 17:06:34","name": "图库","desc": null,"frontpath": "","condition": "","menu": 1,"order": 50,"icon": "AlarmClock","method": "","child": []}]}]}]},{"id": 556,"rule_id": 0,"status": 1,"create_time": "2024-05-29 18:35:06","update_time": "2024-05-30 16:45:55","name": "管理员管理","desc": null,"frontpath": "","condition": "","menu": 1,"order": 3,"icon": "Avatar","method": "","child": [{"id": 557,"rule_id": 556,"status": 1,"create_time": "2024-05-29 18:36:05","update_time": "2024-05-30 16:45:54","name": "管理员管理","desc": null,"frontpath": "/manager/list","condition": "","menu": 1,"order": 50,"icon": "AddLocation","method": "","child": []},{"id": 558,"rule_id": 556,"status": 1,"create_time": "2024-05-29 18:37:14","update_time": "2024-06-06 14:42:46","name": "权限管理","desc": null,"frontpath": "/access/list","condition": "","menu": 1,"order": 50,"icon": "AlarmClock","method": "","child": []},{"id": 587,"rule_id": 556,"status": 1,"create_time": "2024-05-30 16:32:43","update_time": "2024-06-06 14:42:50","name": "角色管理","desc": null,"frontpath": "/role/list","condition": "","menu": 1,"order": 50,"icon": "AddLocation","method": "","child": []}]},{"id": 574,"rule_id": 0,"status": 1,"create_time": "2024-05-30 14:29:44","update_time": "2024-05-30 17:25:32","name": "用户管理","desc": null,"frontpath": "","condition": "","menu": 1,"order": 4,"icon": "User","method": "","child": [{"id": 575,"rule_id": 574,"status": 1,"create_time": "2024-05-30 14:30:55","update_time": "2024-05-30 14:30:55","name": "用户管理","desc": null,"frontpath": "/user/list","condition": "","menu": 1,"order": 50,"icon": "UserFilled","method": "","child": []},{"id": 576,"rule_id": 574,"status": 1,"create_time": "2024-05-30 14:33:11","update_time": "2024-05-30 14:33:11","name": "会员等级","desc": null,"frontpath": "/level/list","condition": "","menu": 1,"order": 50,"icon": "DataLine","method": "","child": []}]},{"id": 6,"rule_id": 0,"status": 1,"create_time": "2019-08-11 13:36:36","update_time": "2024-05-30 16:45:31","name": "商品管理","desc": "shop_goods_list","frontpath": null,"condition": null,"menu": 1,"order": 5,"icon": "shopping-bag","method": "GET","child": [{"id": 15,"rule_id": 6,"status": 1,"create_time": "2019-12-28 13:44:32","update_time": "2024-05-30 15:44:44","name": "规格管理","desc": "shop_sku_list","frontpath": "/skus/list","condition": "","menu": 1,"order": 19,"icon": "aim","method": "GET","child": []},{"id": 13,"rule_id": 6,"status": 1,"create_time": "2019-12-28 13:42:13","update_time": "2024-05-30 15:45:04","name": "商品管理","desc": "shop_goods_list","frontpath": "/goods/list","condition": "","menu": 1,"order": 20,"icon": "shopping-cart-full","method": "GET","child": [{"id": 565,"rule_id": 13,"status": 1,"create_time": "2024-05-30 12:45:24","update_time": "2024-05-30 12:45:24","name": "5555","desc": null,"frontpath": "","condition": "","menu": 1,"order": 50,"icon": "AlarmClock","method": "","child": []}]},{"id": 14,"rule_id": 6,"status": 1,"create_time": "2019-12-28 13:44:00","update_time": "2024-05-29 18:59:54","name": "分类管理","desc": "shop_category_list","frontpath": "/category/list","condition": "","menu": 1,"order": 20,"icon": "menu","method": "GET","child": []}]},{"id": 511,"rule_id": 0,"status": 1,"create_time": "2024-05-25 13:17:25","update_time": "2024-05-30 16:45:31","name": "订单管理","desc": null,"frontpath": "","condition": "","menu": 1,"order": 6,"icon": "Tickets","method": "","child": [{"id": 512,"rule_id": 511,"status": 1,"create_time": "2024-05-25 13:18:03","update_time": "2024-05-28 14:44:26","name": "订单管理","desc": null,"frontpath": "/order/list","condition": "","menu": 1,"order": 50,"icon": "Tickets","method": "","child": [{"id": 550,"rule_id": 512,"status": 1,"create_time": "2024-05-28 21:15:38","update_time": "2024-05-28 21:15:38","name": "sssss","desc": null,"frontpath": "","condition": "","menu": 1,"order": 50,"icon": "","method": "","child": []}]}]},{"id": 577,"rule_id": 0,"status": 1,"create_time": "2024-05-30 14:34:37","update_time": "2024-05-30 16:45:31","name": "分销管理","desc": null,"frontpath": "","condition": "","menu": 1,"order": 7,"icon": "Setting","method": "","child": [{"id": 579,"rule_id": 577,"status": 1,"create_time": "2024-05-30 14:36:27","update_time": "2024-05-30 14:36:27","name": "分销员管理","desc": null,"frontpath": "/distribution/index","condition": "","menu": 1,"order": 50,"icon": "User","method": "","child": []}]},{"id": 513,"rule_id": 0,"status": 1,"create_time": "2024-05-25 13:45:56","update_time": "2024-05-30 16:45:32","name": "优惠券管理","desc": null,"frontpath": "","condition": "","menu": 1,"order": 8,"icon": "AddLocation","method": "","child": [{"id": 545,"rule_id": 513,"status": 1,"create_time": "2024-05-28 14:49:34","update_time": "2024-05-29 18:59:56","name": "优惠券管理","desc": null,"frontpath": "/coupon/list","condition": "","menu": 1,"order": 50,"icon": "Coin","method": "","child": []}]},{"id": 515,"rule_id": 0,"status": 1,"create_time": "2024-05-25 14:14:33","update_time": "2024-05-30 16:45:33","name": "评论管理","desc": null,"frontpath": "","condition": "","menu": 1,"order": 9,"icon": "Aim","method": "","child": [{"id": 544,"rule_id": 515,"status": 1,"create_time": "2024-05-28 14:49:02","update_time": "2024-05-29 18:59:57","name": "评论管理","desc": null,"frontpath": "/comment/list","condition": "","menu": 1,"order": 50,"icon": "ChatLineSquare","method": "","child": []}]},{"id": 578,"rule_id": 0,"status": 1,"create_time": "2024-05-30 14:35:29","update_time": "2024-05-30 16:45:33","name": "公告管理","desc": null,"frontpath": "","condition": "","menu": 1,"order": 10,"icon": "ChatLineSquare","method": "","child": [{"id": 581,"rule_id": 578,"status": 1,"create_time": "2024-05-30 14:38:53","update_time": "2024-05-30 14:38:53","name": "公告管理","desc": null,"frontpath": "/notice/list","condition": "","menu": 1,"order": 50,"icon": "ChatLineRound","method": "","child": []},{"id": 585,"rule_id": 578,"status": 1,"create_time": "2024-05-30 15:05:49","update_time": "2024-05-30 16:44:52","name": "测试界面","desc": null,"frontpath": "","condition": "","menu": 1,"order": 50,"icon": "","method": "","child": []}]}],"ruleNames": ["调度,POST","createRule,POST","updateRule,POST","deleteRule,POST","getRuleList,GET","updateRuleStatus,POST","createRole,POST","updateRole,POST","deleteRole,POST","getRoleList,GET","updateRoleStatus,POST","getGoodsList,GET","getCategoryList,GET","createCategory,POST","sortCategory,POST","updateCategory,POST","updateCategoryStatus,POST","deleteCategory,DELETE","createSkus,POST","deleteSkus,POST","updateSkus,POST","updateSkusStatus,POST","getUserLevelList,GET","createUserLevel,POST","updateUserLevel,POST","updateUserLevelStatus,POST","deleteUserLevel,POST","deleteManager,POST","getManagerList,GET","updateManager,POST","updateManagerStatus,POST","readGoods,GET","updateGoodsSkus,POST","setGoodsBanner,POST","restoreGoods,POST","destroyGoods,POST","deleteGoods,POST","updateGoodsStatus,POST","createGoods,POST","updateGoods,POST","checkGoods,POST","createGoodsSkusCard,POST","sortGoodsSkusCard,POST","updateGoodsSkusCard,POST","deleteGoodsSkusCard,POST","createGoodsSkusCardValue,POST","updateGoodsSkusCardValue,POST","deleteGoodsSkusCardValue,POST","getNoticeList,GET","createNotice,POST","updateNotice,POST","deleteNotice,POST","getCategoryGoods,GET","connectCategoryGoods,POST","deleteCategoryGoods,POST","setRoleRules,POST"]
}

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

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

相关文章

适配器模式(大话设计模式)C/C++版本

适配器模式(大话设计模式)C/C++版本

适配器模式 C #include <iostream> using namespace std; // 球员 class Player { protected:string name;public:Player(string name) : name(name) {}virtual void Attack() 0;virtual void Defense() 0;virtual ~Player() {} }; // 前锋 class Forwards : public P…
阅读更多...
20240613解决飞凌的OK3588-C的核心板的USB3.0接口不读U盘的问题

20240613解决飞凌的OK3588-C的核心板的USB3.0接口不读U盘的问题

20240613解决飞凌的OK3588-C的核心板的USB3.0接口不读U盘的问题 2024/6/13 15:21 缘起&#xff0c;由于USB3.0的CC芯片在飞凌的OK3588-C的开发板的底板上&#xff0c;一切正常。 如果你单独使用核心板&#xff0c;很容易出现这个问题【省成本没有使用CC芯片】&#xff1a;不读U…
阅读更多...
300PLC连接Modbus转Profibus网关与阀岛modbusRTU通讯

300PLC连接Modbus转Profibus网关与阀岛modbusRTU通讯

一、概况 300PLC作为常见的控制器设备&#xff0c;在与阀岛Modbus RTU通讯时&#xff0c;通常需要借助Modbus转Profibus网关&#xff08;XD-MDPB100&#xff09;来实现连接和数据交换。PLC通过Modbus转Profibus网关&#xff08;XD-MDPB100&#xff09;与阀岛Modbus RTU通讯是比…
阅读更多...
labelme使用笔记：目标检测数据集标注和语义分割数据集批量生成

labelme使用笔记：目标检测数据集标注和语义分割数据集批量生成

AI应用开发相关目录 本专栏包括AI应用开发相关内容分享&#xff0c;包括不限于AI算法部署实施细节、AI应用后端分析服务相关概念及开发技巧、AI应用后端应用服务相关概念及开发技巧、AI应用前端实现路径及开发技巧 适用于具备一定算法及Python使用基础的人群 AI应用开发流程概…
阅读更多...
[AIGC] 使用Google的Guava库中的Lists工具类：常见用法详解

[AIGC] 使用Google的Guava库中的Lists工具类：常见用法详解

在Java程序设计中&#xff0c;集合是我们最常用的数据结构之一。为了方便我们操作集合&#xff0c;Google的Guava库提供了一个名为Lists的工具类&#xff0c;它封装了许多用于操作List对象的实用方法。在本文中&#xff0c;我们将详细介绍其常见的用法&#xff0c;以帮助您更好…
阅读更多...
PyQt5 生成py文件不能运行；pushButton点击事件；QTextEdit 获取输入框内容

PyQt5 生成py文件不能运行；pushButton点击事件；QTextEdit 获取输入框内容

目录 cant open file c.pyuic: c.pyuic $FileName$ -o $FileNameWithoutExtension$.p PyQt5 生成py文件不能运行 pushButton点击事件 QTextEdit 获取输入框内容 整体运行代码： Creating a Qt Widget Based Application | Qt Creator Manual cant open file c.pyuic: c.…
阅读更多...
NAT Easyip实验

NAT Easyip实验

我们这篇博客将重点讲述easy ip的配置&#xff1a; 以下面的一个简单的实验拓扑图为例&#xff1a; 本实验使用的网络地址&#xff1a; 1. 我们先来完成基础配置&#xff1a; 1.1AR1的基础配置&#xff1a; 1.2AR2上的基础配置 1.3完成AR1和AR2的基础配置后&#xff0c;我们…
阅读更多...
rust数据类型

rust数据类型

目录 一&#xff0c;基本类型 1&#xff0c;基本类型 &#xff08;1&#xff09;整数类型 &#xff08;2&#xff09;浮点数 &#xff08;3&#xff09;bool类型 &#xff08;4&#xff09;char类型 2&#xff0c;基本类型的代数结构 二&#xff0c;复合类型 1&#x…
阅读更多...
这些帮助你成长的IOS应用，建议收藏

这些帮助你成长的IOS应用，建议收藏

TrackIt TrackIt是一款功能丰富的任务清单、日程管理和习惯打卡应用&#xff0c;旨在帮助用户提高效率和专注力。通过这些功能&#xff0c;用户可以更好地规划时间和任务&#xff0c;从而实现个人目标和养成良好习惯。 在目标设定方面&#xff0c;SMART原则是一个常用的方法&a…
阅读更多...
【决战欧洲之巅】丹麦 vs 英格兰战术分析和球员状态以及走地数据分析

【决战欧洲之巅】丹麦 vs 英格兰战术分析和球员状态以及走地数据分析

丹麦 vs 英格兰战术分析和球员状态 阵型与战术 丹麦: 阵型:丹麦通常采用4-3-3阵型&#xff0c;以因防守为基础&#xff0c;同时通过快速反击等找机会。 ”战术: 防守:丹麦在防守时以紧密的四后卫体彩为核心&#xff0c;辅以中场球员的积极回防&#xff0c;形成稳因的防 线。…
阅读更多...
解决HassOS无法获取ip地址问题

解决HassOS无法获取ip地址问题

目录 问题描述解法 问题描述 在ESXi中安装完HassOS后&#xff0c;开机遇到一个无法获取ip地址的问题&#xff0c;如下图所示&#xff1a; 输入network info命令&#xff0c;显示ipv4已被禁用&#xff0c;如下图所示&#xff1a; 解法 在控制台ha >后输入下面命令 netw…
阅读更多...
基于Java技术“漫画之家”系统

基于Java技术“漫画之家”系统

开头语&#xff1a;你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;Java技术&#xff0c;B/S结构&#xff0c;SpringBoot框架 工具&#xff1a;MyEc…
阅读更多...
板凳--------第60章 SOCKET：服务器设计

板凳--------第60章 SOCKET：服务器设计

60.1 迭代型和并发型服务器 1016 1.迭代型&#xff1a; 服务器每次只处理一个客户端&#xff0c;只有当完全处理完一个客户端的请求后才会去处理下一个客户端。只适用于快速处理客户端请求的场景&#xff0c;因为每个客户端都必须等待&#xff0c;直到前面所有的客户端都处理完…
阅读更多...
一键批量复制至指定文件夹，轻松实现同名文件覆盖，数据管理更高效！

一键批量复制至指定文件夹，轻松实现同名文件覆盖，数据管理更高效！

在数字化时代&#xff0c;文件的管理与复制是每位电脑用户都不可避免的日常工作。你是否曾因为大量文件的复制与更新而焦头烂额&#xff1f;是否曾因为同名文件的冲突而不知所措&#xff1f;别担心&#xff0c;现在&#xff0c;我们为您带来高效文件复制管理的秘诀&#xff0c;…
阅读更多...
【管理咨询宝藏132】国际顶级咨询公司战略组织运营报告套装

【管理咨询宝藏132】国际顶级咨询公司战略组织运营报告套装

本报告首发于公号“管理咨询宝藏”&#xff0c;如需阅读完整版报告内容&#xff0c;请查阅公号“管理咨询宝藏”。 【管理咨询宝藏132】国际顶级咨询公司战略&组织&运营报告套装 【格式】PDF版本 【关键词】德勤、罗兰贝格、外资咨询、战略规划、组织管控、运营提升、…
阅读更多...
HNU操作系统2022期中考试试卷及参考答案

HNU操作系统2022期中考试试卷及参考答案

一、&#xff08;20分&#xff0c;每小题5分&#xff09;简答题 &#xff08;1&#xff09;通过多任务共享实现的虚拟化CPU与通常虚拟机&#xff08;VMware等&#xff09;里所使用的虚拟化技术有什么不一样&#xff1f; 多任务共享实现的虚拟化CPU通常指的是在操作系统层面&am…
阅读更多...
证书速览|CCSK云计算安全知识认证

证书速览|CCSK云计算安全知识认证

随着云计算技术的发展&#xff0c;现在越来越多的企业感受到云的好处&#xff0c;把业务逐渐转移到云上。上云是大势所趋&#xff0c;也是现今企业发展的实际需要。 这就意味着企业会更青睐于具备云安全专业知识、技能与经验的人员。 CCSK 云计算安全知识认证&#xff0c;是由…
阅读更多...
【学习笔记】Maven高级01：POM深入了解

【学习笔记】Maven高级01：POM深入了解

文章目录 一、POM的四个层次超级POM父POM当前POM有效POM(effective pom) 二、属性的声明和引用使用 mvn help:evaluate查看属性通过Maven访问系统属性1、访问Java系统属性2、访问系统属性4、访问系统环境变量5、访问project属性访问一级标签访问子标签访问标签列表 6、访问全局…
阅读更多...
c++里 父类私有的虚函数，也是可以被子类重写和继承的。但父类私有的普通函数，子类无法直接使用

c++里 父类私有的虚函数，也是可以被子类重写和继承的。但父类私有的普通函数，子类无法直接使用

谢谢 。今天看课本上有这么个用法&#xff0c;特测试一下。这样就也可以放心的把父类的私有函数列为虚函数了&#xff0c;或者说把父类的虚函数作为私有函数了。 再补充一例&#xff1a;
阅读更多...
2024-06月 | 维信金科 | 风控数据岗位推荐，高收入岗位来袭！

2024-06月 | 维信金科 | 风控数据岗位推荐，高收入岗位来袭！

今日推荐岗位&#xff1a;策略分析经理/分析专家、贷前、中策略分析、风控模型分析。 风控部门是金融业务的核心部门&#xff0c;而从事风控行业的人即称之为风险管理者。是大脑&#xff0c;是最最最重要的部门之一。今日推荐岗位的核心技能分布如下&#xff1a; 简历发送方式…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023