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

代码如下：

<code><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

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

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