el-menu-item选中改变的颜色 在子页面我也想常亮

在Vue.js中，`el-menu-item`是Element UI库中的菜单项组件，其默认选中的样式会有一个高亮效果。如果你想在子页面保持这种选中状态并让它一直显示为"常亮"，通常你可以通过以下步骤实现：

1. **数据绑定**: 首先，在父组件（通常是导航栏或者路由守卫）中维护当前选中的`menuItem`的状态，例如一个数组或者对象，记录每个`el-menu-item`的`key`或`value`。

<el-menu :default-active="$route.meta.key">
  <el-menu-item v-for="(item, index) in menuItems" :key="index"
                :index="item.key"
                @click="handleItemClick(item)">
    {{ item.name }}
  </el-menu-item>
</el-menu>

<script>
export default {
  data() {
    return {
      menuItems: [
        { name: '首页', key: 'home' },
        // 更多菜单项...
      ]
    };
  },
  methods: {
    handleItemClick(item) {
      this.$router.push({ path: item.path, meta: { key: item.key } });
      // 或者更新数据表示该项已选中，如：
      this.selectedMenuItem = item;
    }
  }
};
</script>

2. **传递状态到子组件**: 使用props将选中的`menuItem`传给子组件，并在子组件的模板上展示相应状态。

<template>
  <div :class="{ active: isActive === selectedMenuItem.key }"> <!-- 检查是否匹配选中的key -->
    <!-- 子页面内容... -->
  </div>
</template>

<script>
export default {
  props: ['selectedMenuItem'],
  computed: {
    isActive() {
      // 判断当前子组件是否处于父菜单选中的路径
      // 示例：假设子组件是通过动态路由渲染，可以根据路由params获取menuKey
      return this.$route.params.menuKey === this.selectedMenuItem.key;
    }
  }
};
</script>

3. **样式调整**: 如果需要保持选中颜色始终一致，可以在子组件的CSS中覆盖默认的`el-menu-item`样式，添加一个持久的高亮类。

.active {
  background-color: /* 你想要的颜色 */;
  border-color: /* 边框颜色 */;
}