el-menu 菜单组件的优化

Beam007

已于 2022-03-31 15:08:25 修改

阅读量1.9k

点赞数

分类专栏： element 文章标签： echarts vue.js 前端

于 2021-08-23 09:56:01 首次发布

本文链接：https://blog.youkuaiyun.com/Beam007/article/details/119823797

版权

本文探讨了在Vue.js中优化el-menu组件的策略，包括放弃router模式以避免路由冲突，确保index的唯一性，处理index绑定错误，解决菜单需二次点击才显示选中样式的问题，调整default-active属性以支持子路由选中，以及处理后退时的路由选中状态。通过这些优化，提高了前端菜单组件的稳定性和用户体验。

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

废话少说先上代码

菜单组件代码（202203）

<el-menu @select="redirectRoute" :collapse="isCollapse" :default-active="currentMenu" background-color="transparent" :unique-opened="true">
  <xxx-navMenu :navMenus="menuData"></xxx-navMenu>
</el-menu>

<template>
  <div class="navMenu">
    <label v-for="navMenu in navMenus" :key="navMenu.menuId">
      <!-- 子菜单 -->
      <el-menu-item id="menuitem" v-if="navMenu&&navMenu.type===1&&navMenu.childs===null" :index="navMenu.sn + '/' + navMenu.url">
        <div>
          <i :class="navMenu.icon"></i>
          <span class="span-ellipsis" slot="title" :title="n