vue实现菜单栏

Vue 实现菜单栏的方法

使用 Vue Router 实现动态菜单

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

<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: '/', 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>

嵌套菜单实现

对于多级菜单，可以使用递归组件实现。创建一个 MenuItem 组件处理子菜单的渲染。

<template>
  <li>
    <div @click="toggle">
      {{ item.name }}
      <span v-if="hasChildren">{{ isOpen ? '-' : '+' }}</span>
    </div>
    <ul v-if="hasChildren && isOpen">
      <menu-item
        v-for="child in item.children"
        :key="child.path"
        :item="child"
      />
    </ul>
  </li>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    item: Object
  },
  data() {
    return {
      isOpen: false
    }
  },
  computed: {
    hasChildren() {
      return this.item.children && this.item.children.length
    }
  },
  methods: {
    toggle() {
      if (this.hasChildren) {
        this.isOpen = !this.isOpen
      }
    }
  }
}
</script>

使用 UI 框架快速实现

主流 Vue UI 框架如 Element UI、Ant Design Vue 都提供了现成的菜单组件。

以 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 #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) {
      console.log(key)
    }
  }
}
</script>

响应式菜单实现

通过 CSS 媒体查询和 Vue 的响应式数据实现移动端适配。

<template>
  <div>
    <button @click="toggleMenu" class="menu-toggle">菜单</button>
    <ul :class="{ 'show-menu': isMenuOpen }">
      <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 {
      isMenuOpen: false,
      menuItems: [
        { path: '/', name: '首页' },
        { path: '/about', name: '关于' }
      ]
    }
  },
  methods: {
    toggleMenu() {
      this.isMenuOpen = !this.isMenuOpen
    }
  }
}
</script>

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

权限控制菜单

结合 Vuex 或 Pinia 实现基于用户角色的菜单权限控制。

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

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['userRole']),
    filteredMenu() {
      return this.menuItems.filter(item => {
        return !item.roles || item.roles.includes(this.userRole)
      })
    }
  },
  data() {
    return {
      menuItems: [
        { path: '/', name: '首页' },
        { path: '/admin', name: '管理', roles: ['admin'] },
        { path: '/profile', name: '个人中心', roles: ['user', 'admin'] }
      ]
    }
  }
}
</script>