element-plus刷新后菜单不选中不高亮的问题

最新推荐文章于 2025-06-10 11:23:38 发布

有衡

最新推荐文章于 2025-06-10 11:23:38 发布

阅读量3.7k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_44747508/article/details/122279299

vue 专栏收录该内容

23 篇文章

订阅专栏

本文介绍了如何在Element Plus的el-menu组件中确保页面刷新后菜单项能自动高亮。只需设置default-active属性，使其与el-menu-item的index属性匹配，轻松实现菜单切换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用element-plus的el-menu组件时发现刷新页面后，菜单不会默认选中也不会高亮。
在这里插入图片描述
很多答案都没有说明真正的原因在哪里，代码又多看起来颇为费力，实际上只要设置el-menu组件的default-active属性

<template>
  <el-menu
    :default-active="defaultMenu" // 设置:default-active
    class="el-menu-vertical-demo"
    background-color="#545c64"
    active-text-color="#409eff"
    text-color="#fff"
  >
    <template v-for="menu in menuList">		// 设置:index
      <el-menu-item v-if="!menu.alwaysShow" :index="indexShow(menu)" @click="tolink(menu)">
        <i class="iconfont menu-iconfont" :class="menu.meta.icon"></i>
        <span class="menu-title">{{ menu.meta.title }}</span>
      </el-menu-item>
    </template>

  </el-menu>
</template>

<script>
export default defineComponent({
  name: 'MenuList',
  setup() {
    const indexShow = (menu, child) => {
      const path = resolvePath(menu, child)
      return path
    }
	// menuList 菜单内容 自己定义
    // 拼接地址
    const resolvePath = (menu, child) => {
      let toJump = ''
      if(!menu.alwaysShow) {
        toJump = menu.path
      } else {
        toJump = menu.path + '/' + child.path
      }
      return toJump
    }
    const defaultMenu = computed(() => { return route.path })
    return {
      defaultMenu,
      indexShow
    }
  },
})
</script>