解决Vue3.0整合element plus时el-menu导航选中后刷新页面保持当前选中状态

在使用 Element-plus 中 el-menu 这个组件时，点击任意菜单子项会将其激活高亮并进入相关页面，如果设置了 default-active 属性，且default-active 没有动态绑定时，刷新页面后，会默认将 default-active 指定的菜单子项激活，但界面会停留在最后一次进入的界面，在之前做 Vue2 的管理系统我采用过通过将当前激活路径存储到本地，然后在 created 钩子函数中获取相关的激活路径，动态绑定到 default-active 中，但是在 Vue3 中有一种比较简单的方法：

通过 router.currentRoute._value.fullPath 获取到当前页面的路径并赋值给 default-active 实现二者的统一，具体实现代码如下：

        <el-menu
          :default-active="activePath"
         >
          <el-sub-menu index="/home">
            <template #title>
              <el-icon><location /></el-icon>
              <span>人员管理</span>
            </template>
            <router-link to="/home/customer" @click="setActivePath()">
              <el-menu-item index="/home/customer">客户管理</el-menu-item>
            </router-link>
            <router-link to="/home/Employees" @click="setActivePath()">
              <el-menu-item index="/home/Employees">员工管理</el-menu-item>
            </router-link>
          </el-sub-menu>

const router = useRouter();
let activePath = '/home/customer'; // 当前默认激活客户管理界面
const setActivePath = () => { // 获取当前菜单激活路径
  activePath = router.currentRoute._value.fullPath;
}
setActivePath();

原帖：(45条消息) 解决Vue3.0整合element plus时el-menu导航选中后刷新页面保持当前选中状态_champion.@的博客-CSDN博客