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

element侧边栏子路由点击不高亮问题

最近自己封装侧边栏  又碰到了点击子路由不高亮的问题

<template><div class="aside"><el-scrollbar :vertical="true" class="scrollbar_left_nav"><el-menu :default-active="defaultActive" :collapse="$store.state.isCollapse" background-color="#3D9A4A"text-color="#fff" active-text-color="#fff" :collapse-transition="false"><!-- 一级菜单 --><div v-for="(item, index) in getMenu" :key="item.name"><el-submenu :index="item.name" v-if="item.children && item.children.length && !item.meta.noShow"><template slot="title"><i class="el-icon-s-order"></i><span v-if="!$store.state.isCollapse">{{ item.meta.title }}</span></template><!-- 二级菜单 --><div v-for="(nth, idx) in item.children" :key="nth.name"><el-submenu :index="nth.name" v-if="nth.children && nth.children.length"><template slot="title"><i class="el-icon-s-order"></i><span>{{ nth.meta.title }}</span></template><!-- 三级菜单 --><div v-for="(lth, ids) in nth.children" :key="lth.name"><el-submenu :index="lth.name" v-if="lth.children && lth.children.length"><template slot="title"><i class="el-icon-s-order"></i><span>{{ lth.meta.title }}</span></template><!-- 四级菜单 --><el-menu-item :index="ath.name" v-for="(ath, ida) in lth.children" :key="ath.name"@click="goRouter(ath)"><i class="el-icon-s-order"></i><span>{{ ath.meta.title }}</span></el-menu-item></el-submenu><el-menu-item v-else :index="lth.name" @click="goRouter(lth)"><i class="el-icon-s-order"></i>{{ lth.meta.title }}</el-menu-item></div></el-submenu><el-menu-item v-else :index="nth.name" @click="goRouter(nth)"><i class="el-icon-s-order"></i>{{ nth.meta.title }}</el-menu-item></div></el-submenu><el-menu-item v-else :index="item.children[0].name" @click="goRouter(item.children[0])"><i class="el-icon-s-order"></i><span v-if="!$store.state.isCollapse">{{ item.children[0].meta.title }}</span></el-menu-item></div></el-menu></el-scrollbar></div>
</template><script>
export default {name: 'layout-sidebar',data() {return {defaultActive: 'bigShow', // 当前高亮}},computed: {// 显示在侧边栏的路由getMenu() {return this.$router.options.routes.filter(it => !it.meta.noLayout && it.path.search(this.$store.state.nowRouter) != -1)}},watch:{$route(){this.defaultActive = this.$route.name}},methods: {// 点击侧边栏 路由跳转事件goRouter(data) {this.defaultActive = data.name// 判断一下 点击跳转页面的路由是否是当前路由  如果是则不做反应  否则跳转到点击页if (data.name !== this.$route.name) {// 路由跳转this.$router.push({name: data.name})}},}
}
</script><style scoped>
::v-deep .el-scrollbar__wrap{overflow: hidden !important;overflow-y: auto !important;
}
.scrollbar_left_nav {height: calc(100vh - 100px);overflow-x: hidden !important;overflow-y: auto !important;
}.aside {height: 100%;width: 100%;position: relative;padding-bottom: 20px;
}::v-deep .is-active {background-color: #30863B !important;
}
</style>

原因:因为我路由渲染使用的是 v-for ,他要绑定 key 值,key 值我喜欢绑(item,index)in xx 里的 index 就这块出现了问题,改成唯一值就好了

相关文章:

element侧边栏子路由点击不高亮问题

最近自己封装侧边栏 又碰到了点击子路由不高亮的问题 <template><div class"aside"><el-scrollbar :vertical"true" class"scrollbar_left_nav"><el-menu :default-active"defaultActive" :collapse"$stor…...

C# 试图加载格式不正确的程序。 (异常来自 HRESULT:0x8007000B)

C# 在调用Cdll时&#xff0c;可能会出现 &#xff1a;试图加载格式不正确的程序。 (异常来自 HRESULT:0x8007000B)这个错误。 一般情况下是C#目标平台跟Cdll不兼容&#xff0c;64位跟32位兼容性问题&#xff0c; a.客户端调用Cdll报的错则&#xff0c; 1)允许的话把C#客户端…...

Linux 进程的睡眠和唤醒详解

概要 在Linux中&#xff0c;仅等待CPU时间的进程称为就绪进程&#xff0c;它们被放置在一个运行队列中&#xff0c;一个就绪进程的状 态标志位为 TASK_RUNNING。一旦一个运行中的进程时间片用完&#xff0c; Linux 内核的调度器会剥夺这个进程对CPU的控制权&#xff0c;并且从运…...

AI 绘画Stable Diffusion 研究(十五)SD Embedding详解

大家好&#xff0c;我是风雨无阻。 本期内容&#xff1a; Embedding是什么&#xff1f;Embedding有什么作用&#xff1f;Embedding如何下载安装&#xff1f;如何使用Embedding&#xff1f; 大家还记得 AI 绘画Stable Diffusion 研究&#xff08;七&#xff09; 一文读懂 Stab…...

在Jupyter Notebook中添加Anaconda环境(内核)

在使用前我们先要搞清楚一些事&#xff1a; 我们在安装anaconda的时候它就内置了Jupyter Notebook&#xff0c;这个jupyter初始只有base一个内核&#xff08;显示为Python3&#xff09; 此后其实我们就不需要重复安装完整的jupyter notebook了&#xff0c;只要按需为其添加新的…...

适配器模式简介

概念&#xff1a; 适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;用于将一个类的接口转换成客户端所期望的另一个接口。它允许不兼容的接口之间进行协同工作。 特点&#xff1a; 通过适配器&#xff0c;可以使原本因为接口不匹配而无法…...

MyBatis —— 多种查询及映射关系

前言 上一篇文章中荔枝梳理了有关MyBatis的相关环境配置和核心配置文件及其模板的设置和生成&#xff0c;而在这篇文章中荔枝会着重梳理MyBatis多种查询情况、特殊SQL执行以及两表联查时映射关系的处理。希望对需要的小伙伴有帮助~~~ 文章目录 前言 一、多种查询情况 1.1 查…...

腾讯云服务器镜像TencentOS Server操作系统详细介绍

腾讯云TencentOS Server镜像是腾讯云推出的Linux操作系统&#xff0c;完全兼容CentOS生态和操作方式&#xff0c;TencentOS Server操作系统为云上运行的应用程序提供稳定、安全和高性能的执行环境&#xff0c;TencentOS可以运行在腾讯云CVM全规格实例上&#xff0c;包括黑石物理…...

Docker 中下载各版本的 CentOS、CentOS Steam 方式

如果你跟我一样&#xff0c;想要在docker下载centos的镜像&#xff0c;但是无奈访问不了 https://hub.docker.com/&#xff0c;于是不知道有哪些tag可以下载&#xff0c;该如何办呢&#xff1f; 方法如下&#xff0c;以供参考。 访问&#xff1a;https://quay.io/repository/…...

多线程使用HashMap,HashMap和HashTable和ConcurrentHashMap区别(面试题常考),硬盘IO,顺便回顾volatile

一、回顾&#x1f49b; 谈谈volatile关键字用法 volatile能够保证内存可见性&#xff0c;会强制从主内存中读取数据&#xff0c;此时如果其他线程修改被volatile修饰的变量&#xff0c;可以第一时间读取到最新的值。 二、&#x1f499; HashMap线程不安全没有锁,HashTable线程…...

专线连接交换机设置 – 如何实现高效率的网络连接?

专线链接交换机设置 – 如何实现高效率的网络连接&#xff1f; 什么是专线连接交换机&#xff1f; 在现代互联网中&#xff0c;网络连接的快速和高效是至关重要的。尤其是对于需要大量数据传输和保证网络稳定性的企业和组织来说&#xff0c;专线连接交换机是一项非常重要的技…...

C#,数值计算——Midexp的计算方法与源程序

1 文本格式 using System; namespace Legalsoft.Truffer { public class Midexp : Midpnt { public new double func(double x) { return funk.funk(-Math.Log(x)) / x; } public Midexp(UniVarRealValueFun funcc, double aa, d…...

微信小程序使用本地存储方法wx.setStorageSync()和wx.getStorageSync()

微信小程序的本地存储可以使用wx.setStorageSync()和wx.getStorageSync()方法实现 使用wx.setStorageSync()方法可以将数据以键值对的方式存储到本地存储中&#xff1a; wx.setStorageSync(demo, demo123);获取数据&#xff1a;使用wx.getStorageSync()方法可以从本地存储中获…...

题解:ABC317C - Remembering the Days

题解&#xff1a;ABC317C - Remembering the Days 题目 链接&#xff1a;Atcoder。 链接&#xff1a;洛谷。 难度 算法难度&#xff1a;B。 思维难度&#xff1a;B。 调码难度&#xff1a;C。 综合评价&#xff1a;普及-。 算法 深度优先搜索。 思路 先建图&#x…...

【CSS】简记CSS效果:通过transition(动画过渡属性)实现侧边栏目滑入滑出

需求 在资金明细的页面中&#xff0c;点击按钮时筛选区域从左侧滑出&#xff0c;完成筛选点击确认后调用接口完成数据查询&#xff0c;筛选区域滑入左侧&#xff1b; 基于微信小程序页面实现 wxml代码 <view><!-- 操作按钮 --><button type"primary&qu…...

LeetCode——最大子数组和(中等)

题目 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 示例 1&#xff1a; 输入&#xff1a;nums [-2,1,-3,4,-1,2,1,-5,4] 输出&#x…...

Zookeeper集成SpringBoot

Curator 是 Apache ZooKeeper 的Java客户端库。 Zookeeper现有常见的Java API如&#xff1a;原生JavaAPI、Curator、ZkClient等。 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"…...

ModaHub魔搭社区:星环科技致力于打造更优越的向量数据库

在数字化时代,数据成为了最重要的资源之一。随着人工智能、大数据等技术的不断发展,向量数据库成为了处理这类数据的关键工具。星环科技作为一家专注于数据存储和管理技术的公司,其重要目标就是将向量数据库打造得更为优越。 在星环科技,有一个专注于向量数据库的团队。这个…...

Dubbo默认使用什么序列化框架?还有哪些?

Dubbo默认使用的序列化框架是Hessian 2.0。Hessian是一种基于二进制的序列化协议&#xff0c;它具有简单、高效的特点&#xff0c;适用于网络传输和存储数据。Hessian在Dubbo中被广泛使用&#xff0c;因为它可以在不同的编程语言之间进行对象的序列化和反序列化。 除了Hessian…...

攻防世界-What-is-this

原题 解题思路 解压后文件 没有后缀&#xff0c;不知道是什么文件。用notepad打开找不到flag。 尝试当成压缩包解压。 用stegsolve以打开图片1&#xff0c; 合成两张图片。...

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

在 Spring Boot 项目里,MYSQL中json类型字段使用

前言&#xff1a; 因为程序特殊需求导致&#xff0c;需要mysql数据库存储json类型数据&#xff0c;因此记录一下使用流程 1.java实体中新增字段 private List<User> users 2.增加mybatis-plus注解 TableField(typeHandler FastjsonTypeHandler.class) private Lis…...

深度剖析 DeepSeek 开源模型部署与应用:策略、权衡与未来走向

在人工智能技术呈指数级发展的当下&#xff0c;大模型已然成为推动各行业变革的核心驱动力。DeepSeek 开源模型以其卓越的性能和灵活的开源特性&#xff0c;吸引了众多企业与开发者的目光。如何高效且合理地部署与运用 DeepSeek 模型&#xff0c;成为释放其巨大潜力的关键所在&…...

用鸿蒙HarmonyOS5实现中国象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的中国象棋小游戏的实现代码。这个实现使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chinesechess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├──…...

消防一体化安全管控平台:构建消防“一张图”和APP统一管理

在城市的某个角落&#xff0c;一场突如其来的火灾打破了平静。熊熊烈火迅速蔓延&#xff0c;滚滚浓烟弥漫开来&#xff0c;周围群众的生命财产安全受到严重威胁。就在这千钧一发之际&#xff0c;消防救援队伍迅速行动&#xff0c;而豪越科技消防一体化安全管控平台构建的消防“…...

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...

解析两阶段提交与三阶段提交的核心差异及MySQL实现方案

引言 在分布式系统的事务处理中&#xff0c;如何保障跨节点数据操作的一致性始终是核心挑战。经典的两阶段提交协议&#xff08;2PC&#xff09;通过准备阶段与提交阶段的协调机制&#xff0c;以同步决策模式确保事务原子性。其改进版本三阶段提交协议&#xff08;3PC&#xf…...

yaml读取写入常见错误 (‘cannot represent an object‘, 117)

错误一&#xff1a;yaml.representer.RepresenterError: (‘cannot represent an object’, 117) 出现这个问题一直没找到原因&#xff0c;后面把yaml.safe_dump直接替换成yaml.dump&#xff0c;确实能保存&#xff0c;但出现乱码&#xff1a; 放弃yaml.dump&#xff0c;又切…...