elementUI的Menu组件高亮问题并保存所选高亮

Element UI的Menu组件提供了高亮当前激活菜单项的功能，但是它不会保存并显示用户的选择。要实现这一点，你需要使用Vue的响应式数据绑定功能来保存用户的选择，并在菜单项上使用:class绑定来动态应用高亮样式。

以下是一个简单的例子，展示了如何实现这一功能：

<template>
  <el-menu
    :default-active="activeMenu"
    class="el-menu-vertical-demo"
    @select="handleSelect"
  >
    <el-menu-item index="1">处理中心</el-menu-item>
    <el-menu-item index="2">订单管理</el-menu-item>
    <el-menu-item index="3">配置中心</el-menu-item>
    <el-menu-item index="4">日志管理</el-menu-item>
  </el-menu>
</template>
 
<script>
export default {
  data() {
    return {
      activeMenu: '1', // 默认激活的菜单项的index
    };
  },
  methods: {
    handleSelect(index, indexPath) {
      this.activeMenu = index; // 保存用户选择的菜单项
      // 这里可以执行其他的逻辑，例如导航到不同的页面等
    },
  },
};
</script>

在这个例子中，:default-active属性绑定到了当前激活菜单项的index，而handleSelect方法用于更新这个activeMenu的值。这样，每次用户选择一个菜单项，它的index就会被保存到activeMenu中，并应用高亮样式。如果你需要在页面刷新后保留这个选择，你可以将activeMenu存储在Vuex或localStorage中，并在组件创建时从存储中恢复。