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

2024-06-21 05:20
文章标签 管理系统 制作 默认 后台 激活 elementplus 跳转 菜单 菜单栏 左侧 vuejs3

本文主要是介绍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"]
}

这篇关于vuejs3+elementPlus后台管理系统，左侧菜单栏制作，跳转、默认激活菜单的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1080314。

相关文章

禁止平板,iPad长按弹出默认菜单事件

禁止平板,iPad长按弹出默认菜单事件

通过监控按下抬起时间差来禁止弹出事件，把以下代码写在要禁止的页面的页面加载事件里面即可     var date;document.addEventListener('touchstart', event => {date = new Date().getTime();});document.addEventListener('touchend', event => {if (new
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...
Vue3项目开发——新闻发布管理系统（六）

Vue3项目开发——新闻发布管理系统（六）

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后，系统就进入了首页。接下来，也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分，左侧为系统的菜单栏，右侧
阅读更多...
工厂ERP管理系统实现源码（JAVA）

工厂ERP管理系统实现源码（JAVA）

工厂进销存管理系统是一个集采购管理、仓库管理、生产管理和销售管理于一体的综合解决方案。该系统旨在帮助企业优化流程、提高效率、降低成本，并实时掌握各环节的运营状况。 在采购管理方面，系统能够处理采购订单、供应商管理和采购入库等流程，确保采购过程的透明和高效。仓库管理方面，实现库存的精准管理，包括入库、出库、盘点等操作，确保库存数据的准确性和实时性。 生产管理模块则涵盖了生产计划制定、物料需求计划、
阅读更多...
Windows如何添加右键新建菜单

Windows如何添加右键新建菜单

Windows如何添加右键新建菜单 文章目录 Windows如何添加右键新建菜单实验环境缘起以新建`.md`文件为例第一步第二步第三步 总结 实验环境 Windows7 缘起 因为我习惯用 Markdown 格式写文本，每次新建一个.txt后都要手动修改为.md，真的麻烦。如何在右键新建菜单中添加.md选项呢？ 网上有很多方法，这些方法我都尝试了，要么太麻烦，要么不凑效
阅读更多...
用Unity2D制作一个人物，实现移动、跳起、人物静止和动起来时的动画：中（人物移动、跳起、静止动作）

用Unity2D制作一个人物，实现移动、跳起、人物静止和动起来时的动画：中（人物移动、跳起、静止动作）

上回我们学到创建一个地形和一个人物，今天我们实现一下人物实现移动和跳起，依次点击，我们准备创建一个C#文件 创建好我们点击进去，就会跳转到我们的Vision Studio，然后输入这些代码 using UnityEngine;public class Move : MonoBehaviour // 定义一个名为Move的类，继承自MonoBehaviour{private Rigidbo
阅读更多...
STL经典案例（四）——实验室预约综合管理系统（项目涉及知识点很全面，内容有点多，耐心看完会有收获的！）

STL经典案例（四）——实验室预约综合管理系统（项目涉及知识点很全面，内容有点多，耐心看完会有收获的！）

项目干货满满，内容有点过多，看起来可能会有点卡。系统提示读完超过俩小时，建议分多篇发布，我觉得分篇就不完整了，失去了这个项目的灵魂 一、需求分析 高校实验室预约管理系统包括三种不同身份：管理员、实验室教师、学生 管理员：给学生和实验室教师创建账号并分发 实验室教师：审核学生的预约申请 学生：申请使用实验室 高校实验室包括：超景深实验室（可容纳10人）、大数据实验室（可容纳20人）、物联网实验
阅读更多...
android系统源码12 修改默认桌面壁纸--SRO方式

android系统源码12 修改默认桌面壁纸--SRO方式

1、aosp12修改默认桌面壁纸 代码路径 ：frameworks\base\core\res\res\drawable-nodpi 替换成自己的图片即可，不过需要覆盖所有目录下的图片。 由于是静态修改，则需要make一下，重新编译。 2、方法二Overlay方式 由于上述方法有很大缺点，修改多了之后容易遗忘自己修改哪些文件，为此我们采用另外一种方法，使用Overlay方式。
阅读更多...
使用Spring Boot集成Spring Data JPA和单例模式构建库存管理系统

使用Spring Boot集成Spring Data JPA和单例模式构建库存管理系统

引言 在企业级应用开发中，数据库操作是非常重要的一环。Spring Data JPA提供了一种简化的方式来进行数据库交互，它使得开发者无需编写复杂的JPA代码就可以完成常见的CRUD操作。此外，设计模式如单例模式可以帮助我们更好地管理和控制对象的创建过程，从而提高系统的性能和可维护性。本文将展示如何结合Spring Boot、Spring Data JPA以及单例模式来构建一个基本的库存管理系统
阅读更多...
【干货分享】基于SSM的体育场管理系统的开题报告（附源码下载地址）

【干货分享】基于SSM的体育场管理系统的开题报告（附源码下载地址）

中秋送好礼 中秋佳节将至，祝福大家中秋快乐，阖家幸福。本期免费分享毕业设计作品：《基于SSM的体育场管理系统》。 基于SSM的体育场管理系统的开题报告 一、课题背景与意义 随着全民健身理念的深入人心，体育场已成为广大师生和社区居民进行体育锻炼的重要场所。然而，传统的体育场管理方式存在诸多问题，如资源分配不均、预约流程繁琐、数据统计不准确等，严重影响了体育场的使用效率和用户体验。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2