当前位置: 首页 > 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>

实现路径跳转:

默认激活菜单

相关文章:

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

制作&#xff1a; <script setup> import {useUserStore} from "/stores/userStore.js"; import {ref} from "vue";const userStore useUserStore() //默认激活菜单 const defaultMenu ref(/home) </script><template><el-menuact…...

代码随想录算法训练营第四十四天|LeetCode198 打家劫舍、LeetCode213 打家劫舍Ⅱ

题1&#xff1a; 指路&#xff1a;198. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09; 思路与代码&#xff1a; 对于这个题&#xff0c;拿房屋i举例&#xff0c;我们需要考虑的是否确定偷取这个房屋&#xff0c;如果确定偷取这个房屋&#xff0c;那么我们将得到房屋i的金…...

Git进阶使用(图文详解)

文章目录 Git概述Git基础指令Git进阶使用一、Git分支1.主干分支2.其他分支2.1创建分支2.2查看分支1. 查看本地分支2. 查看远程分支3. 查看本地和远程分支4. 显示分支的详细信息5. 查看已合并和未合并的分支 2.3切换分支1. 切换到已有的本地分支2. 创建并切换到新分支3. 切换到远…...

Effective C++ 改善程序与设计的55个具体做法笔记与心得 4

四. 设计与声明 18. 让接口容易被正确使用&#xff0c;不易被误用 请记住&#xff1a; 好的接口很容易被正确使用&#xff0c;不容易被误用。你应该在你的所有接口中努力达成这些性质“促进正确使用”的办法包括接口的一致性&#xff0c;以及与内置类型的行为兼容。“阻止误…...

WordPress管理员后台登录地址修改教程,WordPress admin登录地址文件修改方法

我们使用WordPress时&#xff0c;管理员后台登录默认地址为“域名/wp-login.php”或“域名/wp-admin”&#xff0c;为了安全&#xff0c;一般会把此地址改掉&#xff0c;防止有人恶意来攻击咱的WordPress&#xff0c;今天出个WordPress后台登录地址修改教程&#xff0c;修改之后…...

Python基础教程(二十四):日期和时间

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; &#x1f49d;&#x1f49…...

java面向对象(上)

一.面向对象与面向过程 1.面向过程 面向过程(procedure Oriented Programming),简称POP,主要思想就是将问题分解成一个个步骤去解决,把这个步骤称为函数. 典型语言:C语言 优点:可以大大简化代码 缺点:当代码量过大时,不方便维护 2.面向对象 面向对象(Object Oriented Pr…...

揭示SOCKS5代理服务器列表的重要性

在复杂的网络安全领域中&#xff0c;SOCKS5代理在保护在线活动方面发挥着关键作用。本文深入探讨了SOCKS5代理服务器列表的细节&#xff0c;探讨了它们的应用、优势以及在增强在线安全和隐私方面不可或缺的功能。 一、理解SOCKS5代理服务器列表 作为在客户端和服务器之间进行通…...

机器学习python实践——关于ward聚类分层算法的一些个人心得

最近在利用python跟着参考书进行机器学习相关实践&#xff0c;相关案例用到了ward算法&#xff0c;但是我理论部分用的是周志华老师的《西瓜书》&#xff0c;书上没有写关于ward的相关介绍&#xff0c;所以自己网上查了一堆资料&#xff0c;都很难说清楚ward算法&#xff0c;幸…...

从零制作一个docker的镜像

近期docker的镜像仓库不好用了&#xff0c;很多国内的源也无法使用了&#xff0c;所有今天给大家分享一下怎么从零制作一个CentOS镜像。 准备CentOS7最小环境 mkdir /centos7.9-root# 在该目录准备centos的最小环境 sudo yum --installroot/centos7.9-root --releasever7 ins…...

eclipse 老的s2sh(Struts2+Spring+Hibernate) 项目 用import导入直接导致死机(CPU100%)的解决

1、下载Apache Tomcat - Apache Tomcat 8 Software Downloads 图中是8.5.100的版本&#xff0c;下面的设置用的是另一个版本的&#xff0c;其实是一样。 2、先将Server配好&#xff0c;然后再进行导入操作。 2、选择jdk 当然&#xff0c;这里也可以直接“Download and instal…...

《米小圈动画汉字》汉字教育动画化:传统与创新的完美融合!

汉字&#xff0c;作为中华文化的瑰宝&#xff0c;承载着千百年来中华民族的智慧和思想。每一个汉字不仅仅是一个符号&#xff0c;更是一段历史的见证&#xff0c;一种文化的传承。在当今全球化的背景下&#xff0c;汉字教育面临着新的挑战与机遇。在这种背景下&#xff0c;如何…...

【LeetCode最详尽解答】11-盛最多水的容器 Container-With-Most-Water

欢迎收藏Star我的Machine Learning Blog:https://github.com/purepisces/Wenqing-Machine_Learning_Blog。如果收藏star, 有问题可以随时与我交流, 谢谢大家&#xff01; 链接&#xff1a; 11-盛最多水的容器 直觉 这个问题可以通过可视化图表来理解和解决。 通过图形化这个…...

redis 缓存jwt令牌设置更新时间 BUG修复

大家好&#xff0c;今天我又又又来了&#xff0c;hhhhh。 上文中 我们永redis缓存了token 但是我们发现了 一个bug &#xff0c;redis中缓存的token 是单用户才能实现的。 就是 我 redis中存储的键 名 为token 值 是jwt令牌 &#xff0c;但是如果 用户a 登录 之后 创建一个…...

nginx精准禁止特定国家或者地区IP访问

1、安装依赖 dnf -y install gcc-c libtool gd-devel pcre pcre-devel openssl openssl-devel zlib zlib-devel libmaxminddb-devel pcre-devel zlib-devel gcc gcc-c make git2、获取NGINX安装包并安装 wget https://nginx.org/download/nginx-1.26.1.tar.gz git clone http…...

单片机课设-基于单片机的电子时钟设计(仿真+代码+报告)

基于单片机的电子时钟设计 前言一、课设任务是什么?二、系统总体方案硬件设计2.1 系统硬件总体设计2.2 键盘电路设计2.3 DS1302实时时钟芯片电路设计2.4 复位电路2.5 LCD电路设计 三、软件设计3.1 主程序流程图3.2 主要程序设计代码3.3 修改时间函数3.4 扫描键盘函数 四、仿真…...

.net 6 api 修改URL为小写

我们创建的api项目&#xff0c;url是[Route(“[controller]”)]&#xff0c;类似这样子定义的。我们的controller命名是大写字母开头的&#xff0c;显示在url很明显不是很好看&#xff08;url不区分大小写&#xff09;。转换方式&#xff1a; var builder WebApplication.Crea…...

Windows电脑部署Jellyfin服务端并进行远程访问配置详细教程

文章目录 前言1. Jellyfin服务网站搭建1.1 Jellyfin下载和安装1.2 Jellyfin网页测试 2.本地网页发布2.1 cpolar的安装和注册2.2 Cpolar云端设置2.3 Cpolar本地设置 3.公网访问测试4. 结语 前言 本文主要分享如何使用Windows电脑本地部署Jellyfin影音服务并结合cpolar内网穿透工…...

rsync同步目录脚本

假设有两台服务器的示例 IP 地址为&#xff1a; Server A: 192.168.1.100Server B: 192.168.1.200 现在来解释如何使用这个脚本进行服务器之间文件夹内容的同步&#xff0c;保留路径和服务器信息的抽象化。 1. 脚本文件位置和权限 假设脚本文件位于 /root/script.sh&#x…...

LeetCode 6. Z 字形变换

LeetCode 6. Z 字形变换 将一个给定字符串 s 根据给定的行数 numRows &#xff0c;以从上往下、从左到右进行 Z 字形排列。 比如输入字符串为 “PAYPALISHIRING” 行数为 3 时&#xff0c;排列如下&#xff1a; 之后&#xff0c;你的输出需要从左往右逐行读取&#xff0c;产生…...

新手必看!用PHPStudy一键搭建DVWA靶场(附常见错误解决)

零基础实战&#xff1a;用PHPStudy快速搭建DVWA漏洞靶场全指南 第一次接触网络安全实战时&#xff0c;很多人会被复杂的实验环境搭建劝退。作为过来人&#xff0c;我完全理解那种面对满屏报错信息的无力感。本文将手把手带你用PHPStudy这个神器&#xff0c;在Windows系统上快速…...

SDMatte与前端Vue.js结合:打造交互式在线抠图工具

SDMatte与前端Vue.js结合&#xff1a;打造交互式在线抠图工具 1. 引言&#xff1a;让抠图变得简单高效 想象一下这样的场景&#xff1a;电商运营每天需要处理上百张商品图片&#xff0c;设计师反复在Photoshop里手动抠图&#xff0c;自媒体创作者为找不到合适的透明背景素材发…...

Windows系统下Python 3.11环境配置全攻略

1. Python 3.11环境配置前的准备工作 在开始安装Python 3.11之前&#xff0c;我们需要做一些准备工作。首先确认你的Windows系统版本&#xff0c;右键点击"此电脑"选择"属性"&#xff0c;在系统类型中查看是32位还是64位系统。Python 3.11官方已经停止对32…...

基于Python+Hadoop+Spark的美食推荐系统 数据采集与可视化平台 Django框架

1、项目介绍 技术栈 Python语言、Django框架、Scrapy爬虫框架、Echarts 可视化&#xff0c;采集下厨房网站数据。功能模块推荐美食美食用料排行榜分析美食分类占比分析饮食科普美食分类美食详情信息美食详情做法后台数据管理项目介绍本项目基于指定技术栈&#xff0c;爬取下厨房…...

瑞萨RA6E2评估板Keil MDK5开发全攻略:从RA Smart Configurator到烧录调试

瑞萨RA6E2评估板Keil MDK5开发全流程实战指南 对于嵌入式开发者而言&#xff0c;瑞萨RA6E2系列MCU凭借其高性能和丰富外设正成为工业控制、物联网终端设备的优选方案。而Keil MDK5作为Arm生态中最成熟的开发环境之一&#xff0c;与瑞萨官方工具链的深度整合为开发者提供了高效…...

别再傻傻线性扫描了!用Python+Scikit-learn手把手实现IVFFlat图像相似度搜索

用PythonScikit-learn实现IVFFlat图像搜索引擎&#xff1a;从原理到实战 当你面对十万张未分类的图片库&#xff0c;如何快速找到与目标图片最相似的十张&#xff1f;传统线性扫描需要计算所有图片特征的距离&#xff0c;耗时呈线性增长。本文将手把手教你用IVFFlat算法构建高效…...

3种方法永久保存QQ空间历史说说:GetQzonehistory实战指南

3种方法永久保存QQ空间历史说说&#xff1a;GetQzonehistory实战指南 【免费下载链接】GetQzonehistory 获取QQ空间发布的历史说说 项目地址: https://gitcode.com/GitHub_Trending/ge/GetQzonehistory 为什么需要GetQzonehistory&#xff1a;三个真实场景 想象一下&am…...

so-vits-svc声压级标准化终极指南:避免音质损伤的10个关键步骤

so-vits-svc声压级标准化终极指南&#xff1a;避免音质损伤的10个关键步骤 【免费下载链接】so-vits-svc SoftVC VITS Singing Voice Conversion 项目地址: https://gitcode.com/gh_mirrors/so/so-vits-svc 你是否在使用so-vits-svc进行语音转换时&#xff0c;遇到过输出…...

Fillinger:设计自动化时代的效率提升工具

Fillinger&#xff1a;设计自动化时代的效率提升工具 【免费下载链接】illustrator-scripts Adobe Illustrator scripts 项目地址: https://gitcode.com/gh_mirrors/il/illustrator-scripts 核心价值&#xff1a;从机械操作到创意释放的设计革命 核心价值&#xff1a;让…...

Qwen3-VL多模态检索系统:跨模态搜索部署实战案例

Qwen3-VL多模态检索系统&#xff1a;跨模态搜索部署实战案例 用图文对话技术构建智能搜索系统&#xff0c;让AI看懂图片内容并精准回答你的问题 1. 项目介绍与环境准备 Qwen3-VL是阿里最新开源的视觉-语言模型&#xff0c;可以说是目前最强大的多模态AI系统之一。这个模型不仅…...