当前位置：首页 > VUE

vue 实现多级菜单

2026-01-17 11:36:51VUE

Vue 实现多级菜单的方法

递归组件实现

递归组件是处理多级菜单的常见方式，通过组件调用自身实现无限层级嵌套。

<template>
  <ul>
    <li v-for="item in menuData" :key="item.id">
      {{ item.name }}
      <menu-item v-if="item.children && item.children.length" :menu-data="item.children"/>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    menuData: {
      type: Array,
      required: true
    }
  }
}
</script>

动态组件实现

通过动态组件和路由配置实现多级菜单，适合需要路由跳转的场景。

<template>
  <div>
    <div v-for="item in menu" :key="item.path">
      <router-link v-if="!item.children" :to="item.path">
        {{ item.meta.title }}
      </router-link>
      <el-submenu v-else :index="item.path">
        <template #title>{{ item.meta.title }}</template>
        <menu-item :menu="item.children"/>
      </el-submenu>
    </div>
  </div>
</template>

Element UI 实现

使用 Element UI 的 el-menu 组件可以快速实现多级菜单。

<template>
  <el-menu :default-active="activeIndex" mode="vertical">
    <template v-for="item in menuData">
      <el-submenu v-if="item.children" :key="item.id" :index="item.id">
        <template #title>{{ item.title }}</template>
        <menu-item :menu-data="item.children"/>
      </el-submenu>
      <el-menu-item v-else :key="item.id" :index="item.id">
        {{ item.title }}
      </el-menu-item>
    </template>
  </el-menu>
</template>

数据格式示例

多级菜单通常需要特定的数据结构支持。

const menuData = [
  {
    id: 1,
    title: '一级菜单',
    children: [
      {
        id: 11,
        title: '二级菜单',
        children: [
          { id: 111, title: '三级菜单' }
        ]
      }
    ]
  }
]

路由配置示例

结合 Vue Router 实现动态路由菜单。

const routes = [
  {
    path: '/parent',
    component: Parent,
    children: [
      {
        path: 'child',
        component: Child,
        children: [
          { path: 'grandchild', component: Grandchild }
        ]
      }
    ]
  }
]

样式处理技巧

为多级菜单添加样式增强用户体验。

.el-menu--vertical .el-menu {
  background-color: #f5f5f5;
}
.el-menu-item {
  transition: all 0.3s;
}

性能优化

对于大型菜单数据，可以使用虚拟滚动优化性能。

<template>
  <virtual-list :size="50" :remain="10">
    <menu-item v-for="item in bigMenuData" :key="item.id" :item="item"/>
  </virtual-list>
</template>

vue 实现多级菜单