【解决】Vue3中使用element-plus菜单点击两次才高亮显示问题

原因：我这里造成高亮点击两次才生效的原因是重复渲染造成default-active的值重置了。
状况：点击菜单后，地址栏改变、页面也跳转，但要点击第二次后才高亮显示。或者点击第一次时会高亮在主页。调试发现，第一次点击在执行完handleSelect 函数后会执行一次const activeIndex = ref(‘/’)。这是造成的该问题的关键。
解决办法：最有效快速的解决办法就是设置 activeIndex 为当前路由。
…

关键代码：

import { onMounted  } from 'vue';
onMounted(() => {// 设置 activeIndex 为当前路由,避免重新渲染造成活动状态重置activeIndex.value = router.currentRoute.value.path;
});

完整代码

<template><div class="nav-container"><el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#2A3796"text-color="#fff" active-text-color="#ffd04b" @select="handleSelect"><el-menu-item index="/" :exact="true">主页</el-menu-item><el-menu-item index="/one" :exact="true">菜单一</el-menu-item><el-menu-item index="/two" :exact="true">菜单二</el-menu-item><el-menu-item index="/three" :exact="true">菜单三</el-menu-item></el-menu></div>
</template><script lang="ts" setup>
import { ref,onMounted  } from 'vue';
import { useRouter } from 'vue-router';const activeIndex = ref('/')
const router = useRouter();onMounted(() => {// 设置 activeIndex 为当前路由,避免重新渲染造成活动状态重置activeIndex.value = router.currentRoute.value.path;
});const handleSelect = (index: string) => {activeIndex.value = index;router.push(index);
};</script>