vue如何实现多级菜单

实现多级菜单的核心思路

在Vue中实现多级菜单通常需要结合递归组件或动态路由配置。核心在于数据结构的设计和组件的递归渲染能力。

数据结构设计

多级菜单的数据通常是一个嵌套结构的数组，每个菜单项包含label、path、children等属性。例如：

const menuData = [
  {
    label: '首页',
    path: '/home'
  },
  {
    label: '产品',
    path: '/products',
    children: [
      {
        label: '产品列表',
        path: '/products/list'
      },
      {
        label: '产品详情',
        path: '/products/detail'
      }
    ]
  }
]

递归组件实现

创建一个递归组件MenuItem.vue，通过v-for遍历菜单数据并递归渲染子菜单：

<template>
  <div class="menu-item">
    <div @click="handleClick">
      {{ item.label }}
    </div>
    <div v-if="item.children && item.children.length" class="submenu">
      <MenuItem 
        v-for="child in item.children" 
        :key="child.path" 
        :item="child"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  methods: {
    handleClick() {
      if (this.item.path) {
        this.$router.push(this.item.path)
      }
    }
  }
}
</script>

动态路由配置

结合Vue Router实现动态路由，可以在路由配置中定义嵌套路由：

const routes = [
  {
    path: '/products',
    component: ProductsLayout,
    children: [
      {
        path: 'list',
        component: ProductList
      },
      {
        path: 'detail',
        component: ProductDetail
      }
    ]
  }
]

样式处理

为多级菜单添加样式，通常需要处理缩进和展开/折叠效果：

.menu-item {
  padding-left: 20px;
  cursor: pointer;
}
.submenu {
  margin-left: 15px;
  border-left: 1px solid #eee;
}

状态管理

对于复杂的菜单状态（如展开/折叠），可以使用Vuex或Composition API管理：

// 使用Composition API
import { ref } from 'vue'

export default {
  setup() {
    const expandedItems = ref([])

    const toggleExpand = (item) => {
      const index = expandedItems.value.indexOf(item.path)
      if (index > -1) {
        expandedItems.value.splice(index, 1)
      } else {
        expandedItems.value.push(item.path)
      }
    }

    return { expandedItems, toggleExpand }
  }
}

性能优化

对于大型菜单，可以考虑虚拟滚动或懒加载子菜单：

<template>
  <RecycleScroller 
    :items="menuData"
    :item-size="50"
    key-field="path"
  >
    <template v-slot="{ item }">
      <MenuItem :item="item" />
    </template>
  </RecycleScroller>
</template>