解决el-menu导航栏选中的样式不生效问题

在使用 Element-ui 框架构建网页应用时，我们经常会用到 el-menu 组件来创建导航菜单。el-menu 组件提供了简洁易用的方式来展示菜单项，并通过 CSS 样式来区分当前选中的菜单项。然而，在实际应用中，我们可能会遇到一个问题：当页面长时间处于非活动状态后，再次回到页面时，el-menu 的选中状态可能会丢失，导致当前选中的菜单项无法被直观地识别出来。

这个问题的根源在于 el-menu 组件默认使用 :active 伪类来控制选中状态的样式。:active 伪类只有在元素被激活时才会生效，例如鼠标点击或键盘操作。当页面长时间处于非活动状态时，浏览器可能会将所有元素的激活状态重置，导致 :active 伪类失效，从而使 el-menu 的选中样式消失。

为了解决这个问题，我们可以采用以下几种方法：

方法一：利用 :focus 伪类

:focus 伪类用于指示当前获得焦点的元素。我们可以利用 :focus 伪类来模拟 :active 伪类的效果，从而保持 el-menu 的选中状态。具体实现方法如下：

.el-menu-item:focus {
  background-color: #409EFF; /* 选中状态的背景颜色 */
  color: #fff; /* 选中状态的文字颜色 */
}

这种方法的优点是简单易用，只需要添加几行 CSS 代码即可。缺点是 :focus 伪类需要用户主动将焦点设置到菜单项上才会生效，例如使用 Tab 键切换焦点。

方法二：使用 JavaScript 手动控制选中状态

我们可以使用 JavaScript 代码来手动控制 el-menu 的选中状态，并在页面加载或重新激活时恢复选中状态。具体实现方法如下：

// 获取 el-menu 组件实例
const menu = this.$refs.menu;

// 设置选中菜单项的 index
menu.activeIndex = '2'; // 假设要选中第二个菜单项

// 监听页面可见性变化事件
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    // 页面重新可见时，恢复选中状态
    menu.activeIndex = '2'; 
  }
});

这种方法的优点是可以精确地控制选中状态，并且可以在页面重新激活时自动恢复选中状态。缺点是需要编写额外的 JavaScript 代码，并且需要获取 el-menu 组件实例。

方法三：使用 Vuex 或 localStorage 存储选中状态

如果需要在页面刷新或关闭后仍然保持 el-menu 的选中状态，我们可以使用 Vuex 或 localStorage 来存储选中状态。具体实现方法如下：

// 在 Vuex 中存储选中状态
// store.js
export default new Vuex.Store({
  state: {
    activeIndex: '1', // 默认选中第一个菜单项
  },
  mutations: {
    setActiveIndex(state, index) {
      state.activeIndex = index;
    },
  },
});

// 在 el-menu 组件中使用 Vuex 中的选中状态
<template>
  <el-menu :default-active="activeIndex" @select="handleSelect">
    </el-menu>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['activeIndex']),
  },
  methods: {
    ...mapMutations(['setActiveIndex']),
    handleSelect(index) {
      this.setActiveIndex(index);
    },
  },
};
</script>

这种方法的优点是可以持久化存储选中状态，即使页面刷新或关闭后仍然可以恢复选中状态。缺点是需要引入 Vuex 或 localStorage，并且需要编写额外的代码来管理选中状态。

常见问题解答

1. 为什么我的 el-menu 组件没有选中状态的样式？

请检查您的 CSS 代码是否正确设置了选中状态的样式。您可以参考 Element-ui 官方文档中的示例代码。

2. 如何自定义 el-menu 组件的选中状态样式？

您可以通过修改 CSS 代码来自定义 el-menu 组件的选中状态样式。例如，您可以修改 .el-menu-item.is-active 类的样式。

3. 如何在 el-menu 组件中使用路由跳转？

您可以使用 router-link 组件来实现 el-menu 组件中的路由跳转。例如：

<el-menu>
  <el-menu-item index="1">
    <router-link to="/">首页</router-link>
  </el-menu-item>
  <el-menu-item index="2">
    <router-link to="/about">关于我们</router-link>
  </el-menu-item>
</el-menu>

4. 如何在 el-menu 组件中添加图标？

您可以使用 icon 属性来添加图标。例如：

<el-menu>
  <el-menu-item index="1" icon="el-icon-menu">菜单项 1</el-menu-item>
</el-menu>

5. 如何禁用 el-menu 组件中的某个菜单项？

您可以使用 disabled 属性来禁用某个菜单项。例如：

<el-menu>
  <el-menu-item index="1" disabled>菜单项 1</el-menu-item>
</el-menu>

希望以上内容能够帮助您解决 el-menu 组件选中状态丢失的问题，并更好地使用 el-menu 组件。