当前位置：首页 > VUE

vue实现多级导航菜单

2026-02-21 22:42:11VUE

实现多级导航菜单的核心思路

在Vue中实现多级导航菜单通常需要递归组件或动态渲染嵌套数据结构，结合路由配置实现层级联动。以下是具体实现方法。

数据结构设计

推荐使用嵌套数组结构描述菜单层级，例如：

menuItems: [
  {
    title: '首页',
    path: '/',
    children: []
  },
  {
    title: '产品',
    path: '/products',
    children: [
      {
        title: 'Web产品',
        path: '/products/web',
        children: [
          { title: 'Vue插件', path: '/products/web/vue' }
        ]
      }
    ]
  }
]

递归组件实现

创建可递归调用的菜单组件（如Menu.vue）：

<template>
  <ul>
    <li v-for="item in items" :key="item.path">
      <router-link :to="item.path">{{ item.title }}</router-link>
      <Menu v-if="item.children?.length" :items="item.children" />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Menu',
  props: ['items']
}
</script>

动态路由绑定

若需与Vue Router联动，可在路由配置中添加meta字段标记菜单信息：

vue实现多级导航菜单

const routes = [
  {
    path: '/products',
    component: Products,
    meta: { menuTitle: '产品' },
    children: [
      { 
        path: 'web', 
        component: WebProducts,
        meta: { menuTitle: 'Web产品' }
      }
    ]
  }
]

样式与交互优化

CSS层级控制：使用ul li嵌套和缩进实现视觉层级

ul { list-style: none; padding-left: 1em; }
li { margin: 0.5em 0; }

折叠功能：通过v-show控制子菜单显隐

<li v-for="item in items" :key="item.path">
<div @click="toggle(item)">
 {{ item.title }}
 <span v-if="item.children">{{ isOpen(item) ? '↑' : '↓' }}</span>
</div>
<Menu v-show="isOpen(item)" :items="item.children" />
</li>