el-menu-item 实现水平导航栏，路由的跳转

最新推荐文章于 2025-06-18 14:39:56 发布

孩子气呵呵特

最新推荐文章于 2025-06-18 14:39:56 发布

阅读量5.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/weixin_39755186/article/details/99864586

web 专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一种使用Element UI库创建动态顶部菜单栏的方法，该菜单栏可根据左侧导航树的选择显示相应模块，并支持页面间的跳转。代码示例展示了如何通过v-for循环遍历数据数组来动态生成菜单项。

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

废话不多说，直接上代码如下：

<el-menu
      class="el-menu-vertical-demo"
     id="topNav"
      router
      background-color='#ededed'
      text-color='#000000'
      mode="horizontal"
      :default-active="activeIndex"
    >
    <el-menu-item v-for="item in topArray" :key="item.key" :index="item.name"  class="contentShow">
      <template>
        <span :key="item.key" >{{item.name}}</span>
        <img src="../image/outPage.png" :key="item.key">
      </template>
    </el-menu-item>
  </el-menu>

做了一个项目，是左侧导航树进行点击后，上方出现相应的模块，可进行跳转，而且是动态进行添加的，效果图如下：