当前位置：首页 > VUE

vue如何实现menu

2026-02-19 10:52:57VUE

Vue 实现 Menu 的方法

使用 Vue Router 实现导航菜单

通过 Vue Router 可以轻松实现路由导航菜单。定义一个路由配置文件，然后在组件中使用 <router-link> 标签生成菜单项。

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

<!-- Menu.vue -->
<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
</template>

使用 UI 框架快速实现

许多 Vue UI 框架提供了现成的 Menu 组件，如 Element Plus、Ant Design Vue 等。

<template>
  <el-menu :default-active="activeIndex" mode="horizontal">
    <el-menu-item index="1">Home</el-menu-item>
    <el-submenu index="2">
      <template #title>Products</template>
      <el-menu-item index="2-1">Option 1</el-menu-item>
      <el-menu-item index="2-2">Option 2</el-menu-item>
    </el-submenu>
    <el-menu-item index="3">About</el-menu-item>
  </el-menu>
</template>

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

自定义 Menu 组件

可以完全自定义 Menu 组件，通过 v-for 渲染菜单项，并添加交互逻辑。

<template>
  <div class="menu">
    <div 
      v-for="item in menuItems" 
      :key="item.id"
      class="menu-item"
      @click="selectItem(item)"
    >
      {{ item.title }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, title: 'Home', path: '/' },
        { id: 2, title: 'About', path: '/about' }
      ]
    }
  },
  methods: {
    selectItem(item) {
      this.$router.push(item.path)
    }
  }
}
</script>

<style>
.menu {
  display: flex;
  gap: 20px;
}
.menu-item {
  cursor: pointer;
  padding: 10px;
}
.menu-item:hover {
  background-color: #eee;
}
</style>

实现动态菜单

菜单数据可以从后端 API 获取，实现完全动态的菜单配置。

<template>
  <div class="menu">
    <div 
      v-for="item in menuItems" 
      :key="item.id"
      class="menu-item"
    >
      {{ item.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: []
    }
  },
  async created() {
    try {
      const response = await fetch('/api/menu')
      this.menuItems = await response.json()
    } catch (error) {
      console.error('Failed to fetch menu items:', error)
    }
  }
}
</script>

添加菜单动画效果

可以为菜单添加过渡动画，提升用户体验。

<template>
  <transition-group name="menu" tag="div" class="menu">
    <div 
      v-for="item in menuItems" 
      :key="item.id"
      class="menu-item"
    >
      {{ item.title }}
    </div>
  </transition-group>
</template>

<style>
.menu-enter-active, .menu-leave-active {
  transition: all 0.5s ease;
}
.menu-enter-from, .menu-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>

这些方法可以根据项目需求选择使用，或者组合使用以达到最佳效果。

vue如何实现menu