vue爬坑记:关于遇到侧边栏高亮的坑

解决Element-UI 侧边栏页面刷新后不高亮显示的问题 最近在写一个后台管理系统,用的vue+element,搞到侧边栏导航的时候路由跳转没有问题,但之后页面刷新发现侧边栏的选中状态(高亮显示)没有了,因为项目时间比较紧,并且没有影响到我后面的开发所以就搁置了一段时间,今天有时间搞了一下,发现想的时候可能有些复杂,其实这个问题还是比较简单的。 例如:下面这段代码 <template> <el-aside width="240px"... 阅读详情

写在前面:由于vue使用的还不怎么熟练,在设置不同的路由之间跳转需要设置高亮时卡住了,所以记录下遇到的问题.

  • 遇到的问题

    1. 自己写的高亮class在页面刷新时失效,总是第一个高亮
    2. 使用vuex传需要高亮的index值时,使用$store.state.count值传递不到js里面去,只能在html里面用;
    3. 使用vueRouter中的router-link传值时,也是传递不到js里面去;
  • 解决方法
    使用vue自己的高亮class名 .router-link-exact-active,重新定义而且在页面刷新时高亮的class也跑到第一个去了^+^;

说明自己的基础还是不牢固,还需要努力啊!!!

基于vue2的echarts3D地球 采用vue2+js实现了echarts3D地球的放大、缩小和旋转 阅读详情

相关推荐

霍尔式流量计背后的技术和算法

例如,在一项实验中,当流量低于最小操作范围(0.250 L/min)时,误差比其他流量大,但仍然在95%的精度范围内可接受。例如,在Honeywell电子学的测试中,使用30英寸水柱的压力计和热电偶测量气体特性,记录并计算实际和理论质量流量,以确定修正系数。霍尔式流量计的校准系数是通过一系列精确的测量和计算步骤确定的,以确保其测量结果的准确性和可靠性。霍尔式流量计的校准系数是通过严格的环境条件、精确的测量步骤和实验数据确定的。其中,Qs是标尺介质的流量,K是修正系数,Qm是用户介质的流量。

百态·数智思维 | 聚焦大数据、量化与未来AI 1234

石头的实习之路2——Vue+element ui 切换导航栏菜单不高亮问题

使用element ui的横向导航栏组件,点击菜单跳转,路由跳转过来了,但是跳转的菜单没有高亮效果。 跳转产品中心后,可以看到路由变了,但是没有高亮显示 这里采用的跳转方法是在js的methods中写一个方法,通过@click触发方法跳转 methods: { skip_product() { this.$router.push({ path: '/xxxx/product_center' }) } 多方寻找解决办法无果,看到了一位大佬的博客,按照他的方法设置,解

qq_44462050的博客 2658

复现基于PYNQ-Z2的手写数字识别卷积加速器设计

来源雪天鱼。

eachanm的博客 968

vue使用element-ui,页面刷新,导航栏跳转问题(解决)

产生的原因 原因是在使用组件时,设置了默认选中,因此页面刷新,导航发生了变化,而路由及页面并未改变 :default-active="activeIndex" data() { return { activeIndex: '1', }; }, 解决办法 第一步,同样还是要使用默认选中 :default-active="leftNavActive"...

ygx_work的博客 3865

十一种室内定位传感器方案汇总介绍与对比(机器人、物联网领域)

室内定位传感器方案汇总 目录 室内定位传感器方案汇总 1、定位方案概述 1.1、内定位系统有最基本的5种算法: 1.2、常用的室内定位技术主要包括以下几种: 1.3、定位理论 1.4、不同的定位方案对比 2、各种定位方案详细介绍 2.1、单线激光定位 2.2、多线激光定位: 2.3、视觉定位: 2.4、基于射频识别(RFID)技术室内定位 2.4.1、RFID标签(不涉及...

JK-Cool的博客 3万+

手把手教你用XC7A35T FPGA搭建低成本机器视觉系统(含开发板选型指南)

本文详细介绍了如何利用AMD(原Xilinx)Artix-7系列中的XC7A35T FPGA芯片,搭建一套低成本的机器视觉系统。内容涵盖从芯片选型深度剖析、开发板(如黑金AX7035B)对比指南,到使用Vivado创建工程、编写图像处理模块(如RGB转灰度),以及资源优化和与上位机(如OpenCV)协同工作的完整流程,旨在为开发者提供一套可实践的高性价比硬件加速视觉解决方案。

beta5的博客 354

Vue Router构建选项linkActiveClass全局配置菜单高亮显示遇到的问题:默认第一个router-link高亮,点击第2个router-link第一个高亮不会被去除

目录: 初始代码如下: App.vue: <template> <div id="app"> <router-link to="/">首页</router-link> <router-link to="/about">关于</router-link> <router-view /> </div> </template> <script> exp

u010234868的专栏 1297

在MacBook M1/M2上,手把手教你打包包含嵌入模型的RagFlow Docker镜像(避坑指南)

本文详细指导如何在MacBook M1/M2上构建ARM64架构的RagFlow Docker镜像,涵盖环境准备、依赖处理、镜像构建及性能优化全流程。特别针对Apple Silicon芯片的兼容性问题提供解决方案,帮助开发者高效完成本地开发环境搭建。

weixin_26908317的博客 242

el-menu 导航栏菜单 当右边的内容部分跳转路由,导航栏高亮的部分不亮了

右边跳转路由,左边的红色高亮就消失了。 先看一下 el-menu里的两个配置项 这两个配置项可以知道这个 index也就是跳转路由的路径 然后在配置路由的js文件里 下面的/learningStatisticsDetails是在上面的/learningStatistics里面跳转的,这样设置之后,跳转到/learningStatisticsDetails里,/learningStatistics这个部分也是激活状态的,导航栏的高亮部分就不会消失了^ ^ ...

weixin_44816197的博客 1803

ResNet改进(51):基于轴向注意力机制的改进ResNet模型

本文介绍了一种结合轴向注意力机制的改进ResNet模型。 通过在传统CNN中引入轴向注意力,我们能够在保持计算效率的同时,增强模型对图像全局上下文的理解能力。这种混合架构结合了CNN的局部特征提取优势和注意力机制的全局建模能力,在图像识别任务中表现出色。 轴向注意力机制的应用不仅限于ResNet,也可以灵活地集成到其他CNN架构中。 未来可以探索更多注意力变体,或将其应用于特定领域任务,如医学图像分析、自动驾驶等需要精确空间理解的场景。 希望本文能帮助你理解如何将注意力机制与传统CNN结合,为你的计

2401_82355416的博客 359

手把手教你学Simulink--基础微电网场景实例:基于Simulink的混合交直流微电网架构仿真

本文基于Simulink构建混合交直流微电网仿真模型,通过交流子网(风电+交流负荷)和直流子网(光伏+储能+直流负荷)的协同控制,实现系统效率提升8.5%。重点介绍了混合架构原理、下垂控制策略及Simulink建模方法,包括核心模块实现、协调控制器代码和仿真参数设置。通过三种工况测试验证了系统性能:功率转移响应时间<0.5s,电压波动<5%,显著优于传统独立子网架构。文章还提供了进阶优化方向和完整代码清单,为微电网仿真研究提供实用参考。

MHD0815的博客 129

关于vue路由嵌套时父子路由高亮显示的问题

关于vue路由嵌套时父子路由高亮显示的问题 背景 基于@vue-cli 4.4.6新创建了一个项目,在about页面中引入二级路由配置 ![app.vue中的模板布局](https://img-blog.csdnimg.cn/20200730171713532.png) ![about.vue中的模板布局](https://img-blog.csdnimg.cn/20200730171802260.png) 然后是router文件夹下对路由的配置 ![路由配置文件](https://img-blog.csd

Sxf_my的博客 1441

(代码可运行)半导体器件和工艺模拟 使用Silvaco设计构建NMOS并提取各项工艺及器件参数

win10。

qq_20388971的博客 111

element ui 二级菜单_Vue Element-UI 侧边栏高亮

我们在使用 vue + element 写后台管理模板时,肯定逃不过左侧菜单也称侧边栏。举例:我们现在有一个 A 模块,A 模块中有详情页面和编辑页面【一共三个页面】,我们通常怎么考虑? 将三个页面写在一个 vue 里,通过 v-if 等切换展示,使用一个路由。 写成三个 vue ,在 A 模块中引入编辑和详情,再注册和使用,使用一个路由。 写成三个 vue ,在路由里注册三个,通过切换路由实现,...

weixin_39663593的博客 1558

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

侧边栏高亮问题

在侧边导航栏中点击某一项“账单”,此时账单菜单栏中高亮,路由配置为’/list’,从’/list’页面可以点击详情,可以进入详情页面查看详情。 此时,路由发生变化,activeClass将随着路由的变化,从’/list’ 身上移到’/detail’上了,侧边栏的active Class不在了。 如何 在’/detail’ 页面,也要 ‘/list’ 这个页面的样式(高亮)保留住呢? 解决思路:给’/detail’ 加上一个路由元信息,在侧边栏去检查路由元数据,然后看是否需要给其active class。

大桶爆米花eee 489

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

【vue组件封装】根据页面滚动高亮显示目录的侧边栏

现在可以说整个的大前端开发都是组件化的天下,无论从三大框架(Vue、React、Angular),还是跨平台方案的Flutter,甚至是移动端都在转向组件化开发。所以,学习组件化最重要的是它的思想,每个框架或者平台可能实现方法不同,但是思想都是一样的。......

m0_68324632的博客 3306

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

vue-element-admin路由切换到添加或编辑页面后实现侧边栏高亮

背景: 使用vue-element-admin的后台管理系统。添加和编辑页面使用路由跳转的方式切换,但是切换到添加页面后,添加功能所在页面对应的侧边栏不会高亮显示。如图当点击添加或者编辑按钮以后,左侧菜单不再高亮。 分析: 原模板中使用:default-active="$route.path"实现侧边栏的高亮。default-active指当前激活菜单的索引。因为这里添加和编辑页面路由的path...

tomorrownan的博客 6721

vue+iView 动态侧边栏菜单保持高亮选中

iview 动态菜单渲染后,刷新或链接跳入页面侧边栏菜单没有保持高亮选中问题。

weixin_44794123的博客 1231

Element-UI 侧边栏高亮

Element-UI 侧边栏高亮一、出现场景二、解决办法1. F5 刷新高亮问题2. 前进后退后高亮不同步问题 一、出现场景 在使用 Element-UI 的侧边导航栏时我遇到了两个问题: 按 F5 刷新页面后,导航栏默认折叠起来,并且无高亮显示 点击浏览器的前进后退按钮后,高亮显示与页面内容不同步 下面我就这两个问题给出自己的解决办法。 二、解决办法 1. F5 刷新高亮问题 原理:当地址栏发生变化时,修改改变默认显示高亮的值。 首先给导航栏加上 default-active 属性,记得加上冒号。

qq_44706779的博客 2052

vue项目:侧边栏搭配路由侧边栏高亮

如果项目中使用的是element-ui 可以直接使用它的NavMenu组件实现导航栏高亮,它会在activeIndex字段自动识别,匹配到下面item的index,给它加上高亮效果,所以我选择item循环的时候,index绑定每个字段的路由地址,在computed中计算当前路由前两个字段,并赋值给activeIndex,这样可以保证刷新保持高亮效果 <el-menu :default-a...

yayay1010的博客 1668

vue-element-admin点击进入详情页,侧边栏高亮问题

vue-element-admin点击进入详情页,侧边栏高亮问题 只需要在meta里面添加activeMenu { path: '/example', component: Layout, redirect: '/example/list', name: 'Example', meta: { title: 'Example', icon: 'el-icon-s-help' }, children: [ {

qq_41838435的博客 1884

vue-admin-template进入多级子路由时侧边栏父级路由仍然保持高亮

用Vue-admin-template做后台时,难免遇到在某一父界面进入子界面查看详情或者进行其他操作的情况,或者父路由使用了重定向到其某子路由。默认情况下,这时候侧边栏对应的父路由会取消高亮,但是我们想要它保持高亮。

前端小白, 稀土:雩风十六 850

elementui 可伸缩侧边栏_Vue Element-UI 侧边栏高亮

我们在使用 vue + element 写后台管理模板时,肯定逃不过左侧菜单也称侧边栏。举例:我们现在有一个 A 模块,A 模块中有详情页面和编辑页面【一共三个页面】,我们通常怎么考虑?将三个页面写在一个 vue 里,通过 v-if 等切换展示,使用一个路由。写成三个 vue ,在 A 模块中引入编辑和详情,再注册和使用,使用一个路由。写成三个 vue ,在路由里注册三个,通过切换路由实现,使用三...

weixin_29128423的博客 947

vue element-ui路由切换到添加或编辑页面实现侧边栏高亮

问题:添加和编辑页面使用路由跳转的方式切换,但是切换到添加页面后,添加功能所在页面对应的侧边栏不会高亮显示。 解决方法: route 的 index.js 中给需要改变高亮的路由(添加和编辑页面)增加guidePath和jumpPath字段, guidePath:就是一个状态变量,这里可以表示当前路由高亮指向不是本身 jumpPath:表示高亮指向的路由。 在侧边栏el-...

学习记录 2331

vue2.x项目从0到1(二)之后台管理侧边栏(动态渲染路由以及高亮)

vue2.x项目从0到1(二)之后台管理侧边栏(动态渲染路由以及高亮)

notagoodwriter的博客 1367

Vue项目实战:el-menu多级路由高亮那些坑,我都帮你踩过了

本文针对Vue项目中el-menu组件在多级路由场景下高亮失效的常见问题,提供了从原理到实战的完整解决方案。通过深入分析Vue Router的$route.matched机制,并结合Element-UI的el-menu组件特性,详细讲解了如何动态计算高亮索引、处理动态路由与隐藏父级等疑难场景,并分享了封装工具函数与状态管理的最佳实践,帮助开发者彻底规避导航菜单高亮不准的坑。

i3j4k5的博客 651
上一篇: vue爬坑记:初学vuex(一)
下一篇: vue爬坑记:全局面包屑组件
AlexKain
博客等级 码龄8年 35粉丝 105原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值