当前位置：首页 > VUE

vue实现菜单调用

2026-02-25 18:51:42VUE

Vue 实现菜单调用的方法

在 Vue 中实现菜单调用通常涉及组件化设计、状态管理和路由配置。以下是几种常见实现方式：

基于路由的动态菜单

通过 Vue Router 实现菜单与路由的绑定，动态生成菜单结构：

// router.js
const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home,
    meta: { title: '首页', icon: 'home' }
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    meta: { title: '关于', icon: 'info' }
  }
]

<!-- Menu.vue -->
<template>
  <div>
    <router-link 
      v-for="route in menuRoutes" 
      :key="route.name"
      :to="{ name: route.name }"
    >
      <icon :type="route.meta.icon"/>
      {{ route.meta.title }}
    </router-link>
  </div>
</template>

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

使用状态管理的菜单控制

通过 Vuex 管理菜单状态，实现跨组件通信：

// store.js
export default new Vuex.Store({
  state: {
    menuItems: [
      { id: 1, name: 'Dashboard', icon: 'dashboard' },
      { id: 2, name: 'Settings', icon: 'settings' }
    ],
    activeMenu: null
  },
  mutations: {
    setActiveMenu(state, menuId) {
      state.activeMenu = menuId
    }
  }
})

<!-- App.vue -->
<template>
  <div>
    <menu-component @select="handleMenuSelect"/>
    <content-component :activeMenu="activeMenu"/>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['activeMenu'])
  },
  methods: {
    ...mapMutations(['setActiveMenu']),
    handleMenuSelect(menuId) {
      this.setActiveMenu(menuId)
    }
  }
}
</script>

递归组件实现多级菜单

对于嵌套菜单结构，可使用递归组件：

<!-- TreeMenu.vue -->
<template>
  <ul>
    <li v-for="item in menuData" :key="item.id">
      <span @click="toggle(item)">{{ item.name }}</span>
      <tree-menu 
        v-if="item.children && item.expanded" 
        :menu-data="item.children"
      />
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TreeMenu',
  props: ['menuData'],
  methods: {
    toggle(item) {
      this.$set(item, 'expanded', !item.expanded)
    }
  }
}
</script>

使用第三方 UI 库

Element UI 或 Ant Design Vue 等库提供现成的菜单组件：

<template>
  <el-menu :default-active="activeIndex" @select="handleSelect">
    <el-submenu index="1">
      <template #title>产品管理</template>
      <el-menu-item index="1-1">产品列表</el-menu-item>
      <el-menu-item index="1-2">添加产品</el-menu-item>
    </el-submenu>
    <el-menu-item index="2">订单管理</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    handleSelect(index) {
      console.log('选中菜单:', index)
    }
  }
}
</script>

响应式菜单实现

结合媒体查询实现移动端适配：

<template>
  <div>
    <button @click="toggleMobileMenu">菜单</button>
    <nav :class="{ 'mobile-hidden': !showMobileMenu }">
      <!-- 菜单内容 -->
    </nav>
  </div>
</template>

<style scoped>
@media (max-width: 768px) {
  .mobile-hidden {
    display: none;
  }
}
</style>

每种实现方式适用于不同场景，可根据项目需求选择合适方案。路由绑定方式适合SPA应用，状态管理适合复杂交互，递归组件适合多层嵌套菜单，UI库可快速实现标准样式。

vue实现菜单调用