vue动态实现多级菜单

动态实现多级菜单的核心思路

通过递归组件或动态路由实现嵌套菜单结构，数据通常来源于后端接口或本地配置。关键点在于菜单数据的层级化处理和组件递归渲染。

数据结构设计

菜单数据建议采用嵌套结构，例如：

[
  {
    "name": "一级菜单",
    "path": "/level1",
    "children": [
      {
        "name": "二级菜单",
        "path": "/level1/level2",
        "children": []
      }
    ]
  }
]

递归组件实现方案

创建可自调用的菜单组件：

<template>
  <ul>
    <li v-for="item in menuData" :key="item.path">
      <router-link v-if="!item.children" :to="item.path">
        {{ item.name }}
      </router-link>
      <template v-else>
        <span>{{ item.name }}</span>
        <menu-item :menu-data="item.children" />
      </template>
    </li>
  </ul>
</template>

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

动态路由集成方案

在路由配置中启用嵌套路由：

const routes = [
  {
    path: '/parent',
    component: Layout,
    children: [
      {
        path: 'child',
        component: ChildComponent
      }
    ]
  }
]

状态管理优化

对于复杂场景可使用Vuex或Pinia管理菜单状态：

// store/modules/menu.js
export default {
  state: {
    menuTree: []
  },
  actions: {
    async fetchMenu() {
      const res = await api.getMenu()
      this.menuTree = processMenuData(res.data)
    }
  }
}

权限控制实现

结合路由守卫实现动态菜单权限：

router.beforeEach((to, from, next) => {
  const hasPermission = checkMenuPermission(to.meta.roles)
  hasPermission ? next() : next('/403')
})

样式处理技巧

使用CSS变量实现层级缩进：

.menu-item {
  padding-left: calc(var(--level) * 10px);
}

性能优化建议

对于大型菜单树可采用虚拟滚动：

<template>
  <RecycleScroller
    :items="flattenMenuData"
    :item-size="50"
    key-field="path"
  >
    <template #default="{ item }">
      <!-- 菜单项渲染 -->
    </template>
  </RecycleScroller>
</template>

移动端适配方案

通过transform实现滑动菜单：

.submenu {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.submenu.active {
  transform: translateX(0);
}