当前位置：首页 > VUE

vue实现菜单列表

2026-02-21 07:29:10VUE

使用 Vue 实现菜单列表

Vue 可以通过组件化和数据绑定的方式轻松实现菜单列表功能。以下是一个完整的实现方案：

基础菜单组件

创建一个基础的菜单组件 Menu.vue：

<template>
  <ul class="menu">
    <li v-for="item in menuItems" :key="item.id">
      <a :href="item.link">{{ item.text }}</a>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    menuItems: {
      type: Array,
      required: true
    }
  }
}
</script>

<style>
.menu {
  list-style: none;
  padding: 0;
}
.menu li {
  padding: 8px 16px;
}
.menu li a {
  text-decoration: none;
  color: #333;
}
.menu li:hover {
  background-color: #f5f5f5;
}
</style>

多级嵌套菜单

对于多级菜单，可以使用递归组件：

<template>
  <ul class="menu">
    <li v-for="item in items" :key="item.id">
      <a v-if="!item.children" :href="item.link">{{ item.text }}</a>
      <template v-else>
        <span @click="toggle(item)">{{ item.text }}</span>
        <Menu v-if="item.expanded" :items="item.children" />
      </template>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'Menu',
  props: {
    items: Array
  },
  methods: {
    toggle(item) {
      this.$set(item, 'expanded', !item.expanded)
    }
  }
}
</script>

动态数据绑定

在父组件中使用动态数据：

<template>
  <div>
    <Menu :items="menuData" />
  </div>
</template>

<script>
import Menu from './Menu.vue'

export default {
  components: { Menu },
  data() {
    return {
      menuData: [
        {
          id: 1,
          text: '首页',
          link: '/'
        },
        {
          id: 2,
          text: '产品',
          children: [
            {
              id: 21,
              text: '产品1',
              link: '/product1'
            }
          ]
        }
      ]
    }
  }
}
</script>

使用 Vue Router 集成

如果项目使用 Vue Router，可以这样实现导航：

<template>
  <ul class="menu">
    <li v-for="route in routes" :key="route.path">
      <router-link :to="route.path">{{ route.meta.title }}</router-link>
    </li>
  </ul>
</template>

<script>
export default {
  computed: {
    routes() {
      return this.$router.options.routes.filter(r => r.meta?.showInMenu)
    }
  }
}
</script>

响应式菜单

添加响应式功能，在小屏幕下显示汉堡菜单：

<template>
  <div>
    <button @click="showMobileMenu = !showMobileMenu">☰</button>
    <div :class="{ 'mobile-menu': true, 'visible': showMobileMenu }">
      <Menu :items="menuData" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showMobileMenu: false
    }
  }
}
</script>

<style>
.mobile-menu {
  display: none;
}
.mobile-menu.visible {
  display: block;
}
@media (min-width: 768px) {
  .mobile-menu {
    display: block;
  }
}
</style>

这些实现方式可以根据具体需求进行组合和扩展，Vue 的灵活性使得菜单实现既简单又强大。

vue实现菜单列表