当前位置：首页 > VUE

vue 实现菜单

2026-01-12 10:10:59VUE

Vue 实现菜单的方法

在 Vue 中实现菜单功能可以通过多种方式完成，以下是一些常见的方法：

使用 Vue Router 实现路由菜单

通过 Vue Router 可以轻松实现基于路由的菜单导航。定义一个路由配置，然后在组件中通过 v-for 循环生成菜单项。

// router.js
const routes = [
  { path: '/home', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About },
  { path: '/contact', name: 'Contact', component: Contact }
]

// Menu.vue
<template>
  <ul>
    <li v-for="route in routes" :key="route.name">
      <router-link :to="route.path">{{ route.name }}</router-link>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      routes: [
        { path: '/home', name: 'Home' },
        { path: '/about', name: 'About' },
        { path: '/contact', name: 'Contact' }
      ]
    }
  }
}
</script>

使用动态组件实现选项卡菜单

通过动态组件可以实现在同一位置切换不同内容的菜单。

<template>
  <div>
    <button v-for="tab in tabs" :key="tab" @click="currentTab = tab">
      {{ tab }}
    </button>
    <component :is="currentTabComponent"></component>
  </div>
</template>

<script>
import Home from './Home.vue'
import About from './About.vue'

export default {
  data() {
    return {
      tabs: ['Home', 'About'],
      currentTab: 'Home'
    }
  },
  computed: {
    currentTabComponent() {
      return this.currentTab.toLowerCase()
    }
  },
  components: {
    Home,
    About
  }
}
</script>

使用第三方 UI 库实现菜单

许多流行的 Vue UI 库如 Element UI、Vuetify 等都提供了现成的菜单组件。

// 使用 Element UI 的菜单
<template>
  <el-menu
    :default-active="activeIndex"
    mode="horizontal"
    @select="handleSelect"
  >
    <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-item index="3">关于我们</el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: '1'
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

实现递归菜单

对于多级嵌套菜单，可以使用递归组件来实现。

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

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

添加菜单状态管理

对于复杂的菜单状态管理，可以使用 Vuex 来集中管理菜单的展开/折叠状态。

// store.js
export default new Vuex.Store({
  state: {
    menuCollapsed: false
  },
  mutations: {
    toggleMenu(state) {
      state.menuCollapsed = !state.menuCollapsed
    }
  }
})

// Menu.vue
<template>
  <div :class="{ 'collapsed': $store.state.menuCollapsed }">
    <!-- 菜单内容 -->
    <button @click="$store.commit('toggleMenu')">切换菜单</button>
  </div>
</template>

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

vue 实现菜单