vue 实现菜单

Vue 实现菜单的方法

使用 Vue Router 实现动态菜单

通过 Vue Router 可以轻松实现动态菜单，结合路由配置生成菜单项。以下是一个基本示例：

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

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

在路由配置中添加 meta 信息控制菜单显示：

const routes = [
  {
    path: '/home',
    component: Home,
    meta: { title: '首页', showInMenu: true }
  },
  {
    path: '/about',
    component: About,
    meta: { title: '关于我们', showInMenu: true }
  }
]

递归组件实现多级菜单

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

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

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

使用 UI 框架快速实现

许多 Vue UI 框架提供了现成的菜单组件，如 Element UI、Ant Design Vue 等：

<template>
  <el-menu :default-active="activeIndex" mode="horizontal">
    <el-menu-item index="1">首页</el-menu-item>
    <el-submenu index="2">
      <template slot="title">产品</template>
      <el-menu-item index="2-1">产品1</el-menu-item>
      <el-menu-item index="2-2">产品2</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    }
  }
}
</script>

状态管理控制菜单

对于复杂的菜单状态管理，可以使用 Vuex：

// store.js
export default new Vuex.Store({
  state: {
    menuItems: [
      { id: 1, name: '首页', path: '/' },
      { id: 2, name: '产品', path: '/products' }
    ]
  },
  getters: {
    visibleMenuItems: state => state.menuItems.filter(item => !item.hidden)
  }
})

// 组件中使用
<template>
  <ul>
    <li v-for="item in $store.getters.visibleMenuItems" :key="item.id">
      <router-link :to="item.path">{{ item.name }}</router-link>
    </li>
  </ul>
</template>

响应式菜单实现

通过媒体查询和 Vue 数据绑定实现响应式菜单：

<template>
  <div>
    <button @click="toggleMenu">菜单</button>
    <ul :class="{ 'show': isMenuOpen }">
      <li v-for="item in menuItems" :key="item.id">
        <a :href="item.link">{{ item.text }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMenuOpen: false,
      menuItems: [
        { id: 1, text: '首页', link: '/' },
        { id: 2, text: '关于', link: '/about' }
      ]
    }
  },
  methods: {
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen
    }
  }
}
</script>

<style scoped>
ul {
  display: none;
}
ul.show {
  display: block;
}
@media (min-width: 768px) {
  button {
    display: none;
  }
  ul {
    display: flex;
  }
}
</style>

以上方法可以根据项目需求选择或组合使用，实现各种类型的菜单功能。