vue3 使用element-ui的el-menu刷新之后保持选中状态

在Vue 3中，如果你想要在使用Element UI的el-menu组件时刷新页面后保持选中状态，你可以使用Vue的v-model来绑定一个响应式数据属性，这样即使页面刷新，也能保持选中状态的记忆。

以下是一个简单的例子：

<template>
  <el-menu :default-openeds="['1']" active-text-color="#ffd04b"
           :default-active="activeMenu" router>
    <el-menu-item index="1-1">
      <i class="el-icon-menu"></i>
      <span slot="title">导航一</span>
    </el-menu-item>
    <el-menu-item index="1-2">
      <i class="el-icon-menu"></i>
      <span slot="title">导航二</span>
    </el-menu-item>
    <!-- 更多菜单项 -->
  </el-menu>
</template>
 
<script>
import { ref } from 'vue';
 
export default {
  setup() {
    // 使用 ref 创建一个响应式的选中菜单项的数据属性
    const activeMenu = ref(window.sessionStorage.getItem('activeMenu') || '1-1');
 
    // 在组件卸载前保存当前的选中状态
    onBeforeUnmount(() => {
      window.sessionStorage.setItem('activeMenu', activeMenu.value);
    });
 
    return { activeMenu };
  },
};
</script>

在这个例子中，我们使用了ref来创建一个响应式的数据属性activeMenu来跟踪当前激活的菜单项。我们还通过onBeforeUnmount生命周期钩子在组件卸载前将当前的选中状态保存到sessionStorage中。当页面刷新时，我们尝试从sessionStorage中恢复activeMenu的值，如果不存在则使用默认值（例如：'1-1'）。

请确保你的路由器设置能够与el-menu的index属性相匹配，这样el-menu才能正确地高亮显示当前激活的菜单项。