vue 实现菜单

Vue 实现菜单的方法

使用 v-for 动态渲染菜单项

通过 v-for 指令可以动态渲染菜单项，结合数组数据生成菜单结构。数据通常包含 name 和 path 字段，用于显示菜单名称和路由跳转。

<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: [
        { name: '首页', path: '/' },
        { name: '关于', path: '/about' },
        { name: '产品', path: '/products' }
      ]
    }
  }
}
</script>

嵌套菜单的实现

对于多级菜单，可以通过递归组件或嵌套 v-for 实现。数据中增加 children 字段表示子菜单。

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

<script>
export default {
  data() {
    return {
      menuItems: [
        { 
          name: '首页', 
          path: '/',
          children: [
            { name: '子菜单1', path: '/sub1' },
            { name: '子菜单2', path: '/sub2' }
          ]
        },
        { name: '关于', path: '/about' }
      ]
    }
  }
}
</script>

使用 UI 框架快速实现

Element UI、Ant Design Vue 等框架提供了现成的菜单组件，可以快速实现复杂菜单功能。

以 Element UI 为例：

<template>
  <el-menu :default-active="activeIndex" mode="horizontal">
    <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'
    }
  }
}
</script>

菜单状态管理

通过 Vuex 或组件内状态管理当前激活的菜单项，实现高亮显示。

<template>
  <div class="menu">
    <ul>
      <li 
        v-for="item in menuItems" 
        :key="item.path"
        :class="{ active: currentPath === item.path }"
        @click="selectMenu(item.path)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPath: '/',
      menuItems: [
        { name: '首页', path: '/' },
        { name: '关于', path: '/about' }
      ]
    }
  },
  methods: {
    selectMenu(path) {
      this.currentPath = path
      this.$router.push(path)
    }
  }
}
</script>

<style>
.active {
  color: red;
  font-weight: bold;
}
</style>

响应式菜单

结合媒体查询和 Vue 数据绑定，实现移动端和桌面端的不同菜单展示方式。

<template>
  <div>
    <button @click="showMobileMenu = !showMobileMenu">菜单</button>
    <ul :class="{ 'mobile-menu': isMobile, 'show': showMobileMenu }">
      <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 {
      showMobileMenu: false,
      isMobile: window.innerWidth < 768,
      menuItems: [
        { name: '首页', path: '/' },
        { name: '关于', path: '/about' }
      ]
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      this.isMobile = window.innerWidth < 768
    }
  }
}
</script>

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