当前位置：首页 > VUE

vue实现多级菜单

2026-03-10 11:58:32VUE

Vue 实现多级菜单的方法

递归组件实现

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

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

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

动态路由配置

结合 Vue Router 实现基于路由配置的多级菜单。

const routes = [
  {
    path: '/parent',
    component: ParentComponent,
    children: [
      {
        path: 'child',
        component: ChildComponent,
        children: [
          // 可继续嵌套
        ]
      }
    ]
  }
]

状态管理集成

使用 Vuex 或 Pinia 管理菜单状态，实现跨组件共享。

// Pinia 示例
export const useMenuStore = defineStore('menu', {
  state: () => ({
    menus: [
      {
        id: 1,
        title: '一级菜单',
        children: [
          {
            id: 2,
            title: '二级菜单'
          }
        ]
      }
    ]
  })
})

第三方组件库

Element UI 或 Ant Design Vue 等库提供现成的多级菜单组件。

<template>
  <el-menu>
    <el-submenu v-for="item in menuData" :key="item.id" :index="item.id">
      <template #title>{{ item.title }}</template>
      <el-menu-item v-for="child in item.children" :key="child.id" :index="child.id">
        {{ child.title }}
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

样式处理技巧

使用 CSS 实现多级菜单的缩进和动画效果。

.menu-item {
  padding-left: 20px;
  transition: all 0.3s ease;
}
.menu-item:hover {
  background-color: #f5f5f5;
}
.submenu-enter-active,
.submenu-leave-active {
  transition: height 0.3s ease;
}

性能优化建议

对于大型菜单数据结构，可采用虚拟滚动优化。

vue实现多级菜单

<template>
  <RecycleScroller
    :items="flattenedMenuData"
    :item-size="32"
    key-field="id"
  >
    <template #default="{ item }">
      <div :style="{ paddingLeft: `${item.level * 20}px` }">
        {{ item.title }}
      </div>
    </template>
  </RecycleScroller>
</template>