当前位置：首页 > VUE

vue实现多级子菜单

2026-02-21 17:15:35VUE

Vue 实现多级子菜单的方法

递归组件实现

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

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

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

动态路由结合实现

对于需要与路由关联的菜单，可结合路由配置实现动态渲染。

<template>
  <div>
    <template v-for="route in routes">
      <div v-if="route.children" class="menu-group">
        <div class="menu-title">{{ route.meta.title }}</div>
        <sub-menu :routes="route.children" />
      </div>
      <router-link v-else :to="route.path">
        {{ route.meta.title }}
      </router-link>
    </template>
  </div>
</template>

状态管理集成

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

// store/modules/menu.js
export default {
  state: () => ({
    menuTree: []
  }),
  mutations: {
    setMenu(state, payload) {
      state.menuTree = payload
    }
  }
}

样式与交互优化

为提升用户体验，可添加过渡动画和交互效果。

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

权限控制集成

根据用户角色动态过滤菜单项，实现权限控制。

function filterMenu(menuData, userRole) {
  return menuData.filter(item => {
    if (item.children) {
      item.children = filterMenu(item.children, userRole)
    }
    return !item.meta?.roles || item.meta.roles.includes(userRole)
  })
}

性能优化建议

对于大型菜单树，可采用虚拟滚动技术优化渲染性能。

<template>
  <RecycleScroller 
    :items="flattenMenu"
    :item-size="50"
    key-field="id"
  >
    <template v-slot="{ item }">
      <menu-item :item="item" />
    </template>
  </RecycleScroller>
</template>

实现多级子菜单时，应根据具体需求选择合适的技术方案，并注意组件封装和状态管理，确保代码的可维护性和扩展性。

vue实现多级子菜单