vue3+element plus, el-menu导航选中后刷新页面保持当前选中状态

在Vue 3和Element Plus中，要在刷新页面后保持el-menu的选中状态，可以使用Vue的ref来保存选中状态，并在组件加载时（如onMounted钩子中）恢复这个状态。

以下是一个简单的示例：

<template>
  <el-menu
    :default-active="activeMenu"
    @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 setup>
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
 
const activeMenu = ref('');
 
const handleSelect = (key, indexPath) => {
  activeMenu.value = key;
};
 
const route = useRoute();
 
onMounted(() => {
  // 根据当前路由设置默认选中
  activeMenu.value = route.path;
});
 
// 如果需要在页面刷新后保留状态，可以使用 localStorage 或 sessionStorage 存储状态
window.addEventListener('beforeunload', () => {
  localStorage.setItem('activeMenu', activeMenu.value);
});
 
onMounted(() => {
  const storedActiveMenu = localStorage.getItem('activeMenu');
  if (storedActiveMenu) {
    activeMenu.value = storedActiveMenu;
  }
});
</script>

在这个示例中，我们使用了ref来创建响应式的activeMenu变量，它存储了当前选中的菜单项的index。在el-menu上，我们将default-active绑定到activeMenu上，这样在组件加载时会自动将对应的菜单项设置为选中状态。

同时，我们在组件加载（onMounted钩子）后从localStorage中尝试读取之前存储的选中状态，并更新activeMenu的值。

当用户选择其他菜单项时，handleSelect会被调用，并更新activeMenu的值。

注意：为了简化示例，没有包含所有可能的细节，比如错误处理和生产环境的存储策略。在实际应用中，你可能需要添加额外的逻辑来处理存储和恢复选中状态时的异常情况。