当前位置：首页 > VUE

vue实现菜单栏

2026-02-21 00:25:39VUE

Vue 实现菜单栏的方法

使用 Vue Router 实现动态菜单

在 Vue 项目中，可以通过 Vue Router 动态生成菜单栏。创建一个 Menu 组件，结合路由配置实现导航功能。

<template>
  <div class="menu">
    <ul>
      <li v-for="item in menuItems" :key="item.path">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { path: '/home', name: '首页' },
        { path: '/about', name: '关于我们' },
        { path: '/contact', name: '联系我们' }
      ]
    }
  }
}
</script>

<style scoped>
.menu ul {
  list-style: none;
  padding: 0;
}
.menu li {
  display: inline-block;
  margin-right: 20px;
}
</style>

使用 Element UI 的菜单组件

如果项目中使用 Element UI，可以直接使用其提供的 el-menu 组件快速实现菜单栏。

<template>
  <el-menu
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <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 {
  name: 'NavMenu'
}
</script>

实现响应式菜单

对于移动端适配，可以使用 CSS 媒体查询和 Vue 的状态管理来实现响应式菜单。

<template>
  <div>
    <button @click="toggleMenu">菜单</button>
    <div class="menu" :class="{ 'show': isMenuVisible }">
      <ul>
        <li v-for="item in menuItems" :key="item.path">
          <router-link :to="item.path">{{ item.name }}</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isMenuVisible: false,
      menuItems: [
        { path: '/', name: '首页' },
        { path: '/about', name: '关于' }
      ]
    }
  },
  methods: {
    toggleMenu() {
      this.isMenuVisible = !this.isMenuVisible
    }
  }
}
</script>

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

递归实现多级菜单

对于复杂的多级菜单结构，可以使用递归组件实现。

<template>
  <ul>
    <li v-for="item in menuData" :key="item.id">
      <span>{{ item.name }}</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>

与 Vuex 集成管理菜单状态

在大型应用中，可以使用 Vuex 集中管理菜单的状态和权限控制。

// store/modules/menu.js
const state = {
  menuItems: [
    { path: '/dashboard', name: '仪表盘', role: 'admin' },
    { path: '/profile', name: '个人中心', role: 'user' }
  ]
}

const getters = {
  availableMenus: (state) => (role) => {
    return state.menuItems.filter(item => item.role === role)
  }
}

export default {
  state,
  getters
}

// 在组件中使用
<template>
  <nav>
    <ul>
      <li v-for="item in availableMenus(userRole)" :key="item.path">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </li>
    </ul>
  </nav>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters('menu', ['availableMenus']),
    userRole() {
      return this.$store.state.user.role
    }
  }
}
</script>

vue实现菜单栏