当前位置: 首页 > news >正文

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

制作:

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

实现路径跳转:

默认激活菜单

http://www.lryc.cn/news/377762.html

相关文章:

  • 代码随想录算法训练营第四十四天|LeetCode198 打家劫舍、LeetCode213 打家劫舍Ⅱ
  • Git进阶使用(图文详解)
  • Effective C++ 改善程序与设计的55个具体做法笔记与心得 4
  • WordPress管理员后台登录地址修改教程,WordPress admin登录地址文件修改方法
  • Python基础教程(二十四):日期和时间
  • java面向对象(上)
  • 揭示SOCKS5代理服务器列表的重要性
  • 机器学习python实践——关于ward聚类分层算法的一些个人心得
  • 从零制作一个docker的镜像
  • eclipse 老的s2sh(Struts2+Spring+Hibernate) 项目 用import导入直接导致死机(CPU100%)的解决
  • 《米小圈动画汉字》汉字教育动画化:传统与创新的完美融合!
  • 【LeetCode最详尽解答】11-盛最多水的容器 Container-With-Most-Water
  • redis 缓存jwt令牌设置更新时间 BUG修复
  • nginx精准禁止特定国家或者地区IP访问
  • 单片机课设-基于单片机的电子时钟设计(仿真+代码+报告)
  • .net 6 api 修改URL为小写
  • Windows电脑部署Jellyfin服务端并进行远程访问配置详细教程
  • rsync同步目录脚本
  • LeetCode 6. Z 字形变换
  • RTC实时时钟
  • WHAT - React 学习系列(一)
  • 代理模式(静态代理/动态代理)
  • Word2Vec基本实践
  • IIS配置網站登錄驗證,禁止匿名登陸
  • 抖音矩阵系统搭建,AI剪辑短视频,一键管理矩阵账号
  • 山东大学软件学院创新项目实训开发日志——收尾篇
  • vue2.7支持组合式API,但是对应的vue-router3并不支持useRoute、useRouter。
  • 摊位纠纷演变肢体冲突,倒赔了500:残疾夫妇与摊主谁之过?
  • 深入理解和实现Windows进程间通信(消息队列)
  • Web网页前端教程免费:引领您踏入编程的奇幻世界