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

【解决】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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

又又爱拍照

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值