ToB企服应用市场:ToB评测及商务社交产业平台

标题: 前端Vue监听路由变化，点击页面内按钮跳转菜单更改导航菜单选中状态 [打印本页]

作者: 圆咕噜咕噜 时间: 2024-9-17 03:24
标题: 前端Vue监听路由变化，点击页面内按钮跳转菜单更改导航菜单选中状态
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
  代码如下：

<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

故我们再重置字体颜色，代码如下：

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

复制代码

终极代码如下：

<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.实现结果

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)