前端Vue监听路由变化, 点击页面内按钮跳转菜单更改导航菜单选中状态

devtools/2024/9/25 0:32:55/
htmledit_views">

1.问题描述

当我们进入页面时的菜单导航栏是默认选中的状态如图

 点击博客园效果如图

问题1:

但是当我们点击页面上方返回按钮时,导航栏选中状态没有改变

分析问题1:

        这个问题是因为页面改变后页面里面存储的菜单导航栏的is-active属性没有改变,故为了解决这个问题我们应该添加监听事件,监听页面路由信息改变时改变菜单栏选中状态,方案如下 

 为页面添加watch监听熟悉,方法如下:

解决问题1:

监听页面路由信息的变化,变化后获取变化后的路由信息并改变active的值 

这里我们修改完后重复上述操作发现菜单栏选中效果已改变如图:

 但是这里我们测试过后会发现,当我们在博客园页面的时候点击刷新页面

问题2:

他的选中状态改回了默认的博客,但是路由还是博客园的路由

分析问题2:

这里的问题产生的原因是因为我们在data中为菜单栏的初始选中状态设置了默认值如图

页面刷新会经过监听方法为选中状态赋新值即(myBlog)但是紧接着会执行Vue页面生命周期-销毁,然后重新经历页面的生命周期-创建选中状态被销毁然后经历创建的时候赋予了默认值,故选中状态成为了默认状态,这里我们要解决这个问题那就是要在页面的生命周期-创建的时候再次拿到页面的路由信息并为其赋当前路由信息的值,故解决办法如下: 

解决问题2:

这里在页面的生命周期-创建的时候获取页面路由信息并赋给菜单栏的选中状态,问题解决。 

问题3: 

但是不知道各位刚刚发现没有,页面切换以后上一次菜单的默认选中状态没有被清除如图:

这个问题我们尝试后会发现,这种情况下我们点击页面任意处会发现可以清除上一次菜单的选中样式,如图

但是这种操作绝对是不符合一个用户的操作习惯的,故我们应该在路由更新后同步清除选中样式

分析问题3

这里产生这个现象的原因和选中状态大致相同,那就是因为页面重新加载后之前的选中的CSS样式并没有清除,那么我们是不是在生命周期-创建的过程中把CSS样式清除就可以了呢?带着这个问题我查阅了一些资料并翻看了Element Plus中我使用的组件el-menu、el-menu-item的CSS源码,发现想要清除CSS样式并不容易,甚至是无从下手,但是我们换个思路,既然无法在生命周期-创建中清除他的选中样式,那么我们直接全部清除他的选中样式不就解决问题了吗,但是我们又要通过选中样式区分他的选中状态,通过F12对页面元素进行分析可知

我们只需要设置鼠标移上去,背景颜色不改变,菜单背景颜色选中不改变即可

故我们只清除他的两个样式属性即可:

1.       :hover属性,

2.       background-color

代码如下:

css"><style>
.el-menu-item {font-size: 18px !important;font-family: "宋体";font-weight: bold;
}.el-menu-item:hover {background-color: transparent !important;
}
</style>

但是!

我们发现页面的选中效果仍然存在

这个问题是因为选中的时候改变了el-menu-item的background-color属性,故我们需要把el-menu-item的background-color属性也改为transparent,改完后页面实现效果:

这里我们发现背景色虽然没有了,但是字体的选中颜色又没有清除,

解决问题3

故我们再重置字体颜色,代码如下:

css">.el-menu-item,
.el-menu-item:hover {color: black !important;background-color: transparent !important;
}

最终代码如下:

css"><style>
.el-menu-item {font-size: 18px !important;font-family: "宋体";font-weight: bold;
}.el-menu-item.is-active,
.el-menu-item,
.el-menu-item:hover {color: black !important;background-color: transparent !important;
}
</style>

3.实现效果


http://www.ppmy.cn/devtools/96731.html

相关文章

触摸感应芯片原厂/抗干扰2路2通道触摸/双通道触摸方案VK3602XS SOP8

产品品牌&#xff1a;永嘉微电/VINKA 产品型号&#xff1a;VK3602XS 封装形式&#xff1a;SOP8 概述 VK3602XS具有2个触摸按键&#xff0c;可用来检测外部触摸按键上人手的触摸动作。该芯片具有 较高的集成度&#xff0c;仅需极少的外部组件便可实现触摸按键的检测。 提供了2…

【Linux】进程程序替换

目录 一、原理 二、程序替换函数 三、模拟实现简易版shell 一、原理 我们可以通过fork方法创建一个子进程&#xff0c;但是我们为什么要创建子进程呢&#xff1f; 在程序中&#xff0c;我们往往需要子进程帮助我们执行另一个程序&#xff0c;但子进程又只能和父进程共享相…

Win10下载安装Mysql服务

Win10下载安装MySQL 一、官网下载MySQL 1.官网地址&#xff1a; https://www.mysql.com/ 2.在官网首页拉到最下方&#xff0c;点击MySQL Community Server&#xff1a; 3.根据个人电脑的操作系统选择&#xff0c;此处以Windows x64为例&#xff0c;选择第2个&#xff0c;点击…

【日常记录-Java】EasyExcel输出设定字体

Author&#xff1a;赵志乾 Date&#xff1a;2024-08-15 Declaration&#xff1a;All Right Reserved&#xff01;&#xff01;&#xff01; 1. 问题描述 使用EasyExcel默认的设定输出时&#xff0c;中文字体显得比较怪异。 2. 解决方案 本质是单元格样式的设置问题&#xff0c…

参与团体标准的意义以及作用

随着经济的快速发展和科技的不断进步&#xff0c;行业的规范与统一变得愈发重要。团体标准应运而生&#xff0c;成为了推动行业前行的强大力量。参与其中&#xff0c;其所带来的作用和意义犹如璀璨星辰&#xff0c;照亮了发展的道路 参与团体标准具有诸多显著的作用&#xff0c…

GIF动图太大怎么压缩?4种方法轻松解决gif动图压缩!

GIF图像的制作方式一般有3种&#xff1a;图片转gif&#xff0c;视频转gif&#xff0c;屏幕录制gif。其中&#xff0c;屏幕录制gif 和视频转gif的形式是我们日常办公制作中最经常使用的方法&#xff0c;但是&#xff0c;这两种方法制作出来的gif动图往往因为高清晰度和时长&…

CSS的:scope伪类:精准定位表格元素的新策略

CSS&#xff08;层叠样式表&#xff09;是控制网页元素样式的强大工具。随着CSS规范的不断更新&#xff0c;新的选择器和伪类被引入&#xff0c;以增强开发者对页面元素的控制能力。:scope伪类是CSS中一个相对较新的特性&#xff0c;它允许开发者在特定的上下文中选择元素&…

【Leetcode 1128 】 等价多米诺骨牌对的数量 —— 二维数组模拟哈希表

给你一组多米诺骨牌 dominoes 。 形式上&#xff0c;dominoes[i] [a, b] 与 dominoes[j] [c, d] 等价 当且仅当 (a c 且 b d) 或者 (a d 且 b c) 。即一张骨牌可以通过旋转 0 度或 180 度得到另一张多米诺骨牌。 在 0 < i < j < dominoes.length 的前提下&…