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

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

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

...

关键代码:

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

完整代码

typescript 复制代码
<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>
相关推荐
Aotman_11 小时前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
Nan_Shu_61411 小时前
Web前端面试题(1)
前端·面试·职场和发展
EveryPossible11 小时前
选择数据展示
javascript
lypzcgf11 小时前
Coze源码分析-资源库-创建知识库-前端源码-核心组件
前端·typescript·react·coze·coze源码分析·ai应用平台·agent开发平台
百思可瑞教育12 小时前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育
患得患失94912 小时前
【个人项目】【前端实用工具】OpenAPI to TypeScript 转换器
前端·javascript·typescript
大前端helloworld12 小时前
前端梳理体系从常问问题去完善-基础篇(html,css,js,ts)
前端·javascript·面试
trsoliu13 小时前
前端基于 TypeScript 使用 Mastra 来开发一个 AI 应用 / AI 代理(Agent)
前端·人工智能
鸡吃丸子13 小时前
前端权限控制:深入理解与实现RBAC模型
前端
Larry_zhang双栖13 小时前
低版本Chrome 内核兼容性问题的优美解决
前端·chrome