当前位置：首页 > VUE

vue菜单怎么实现

2026-03-10 05:11:54VUE

Vue 菜单实现方法

基础菜单结构

使用 Vue 的模板语法和组件化思想构建菜单。通过 v-for 动态渲染菜单项，结合 v-bind 绑定数据。

<template>
  <div class="menu">
    <ul>
      <li v-for="item in menuItems" :key="item.id">
        <a :href="item.link">{{ item.title }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        { id: 1, title: '首页', link: '/' },
        { id: 2, title: '产品', link: '/products' },
        { id: 3, title: '关于', link: '/about' }
      ]
    }
  }
}
</script>

嵌套子菜单

通过递归组件或嵌套 v-for 实现多级菜单。使用 v-show 或 v-if 控制子菜单显示。

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

动态激活状态

利用 Vue 的响应式特性，通过 v-bind:class 动态切换菜单项的激活状态。

<template>
  <li v-for="item in menuItems" :key="item.id">
    <a 
      :href="item.link" 
      :class="{ 'active': currentRoute === item.link }"
    >
      {{ item.title }}
    </a>
  </li>
</template>

<script>
export default {
  computed: {
    currentRoute() {
      return this.$route.path
    }
  }
}
</script>

路由集成

结合 Vue Router 实现单页应用的菜单导航。使用 router-link 替代原生 <a> 标签。

<template>
  <nav>
    <router-link 
      v-for="item in menuItems" 
      :key="item.id" 
      :to="item.link"
    >
      {{ item.title }}
    </router-link>
  </nav>
</template>

响应式设计

通过 CSS 媒体查询或 Vue 的响应式数据实现移动端适配。可使用 window.innerWidth 监听屏幕变化。

data() {
  return {
    isMobile: window.innerWidth < 768
  }
},
mounted() {
  window.addEventListener('resize', this.handleResize)
},
methods: {
  handleResize() {
    this.isMobile = window.innerWidth < 768
  }
}

动画效果

使用 Vue 的 <transition> 组件为菜单添加展开/折叠动画。

<transition name="slide">
  <ul v-show="isMenuOpen">
    <li v-for="item in menuItems" :key="item.id">
      {{ item.title }}
    </li>
  </ul>
</transition>

<style>
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s ease;
}
.slide-enter, .slide-leave-to {
  transform: translateX(-100%);
}
</style>

状态管理

对于复杂应用，可通过 Vuex 集中管理菜单状态。

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

第三方组件库

直接使用现成的 UI 库如 Element UI、Ant Design Vue 的菜单组件。

vue菜单怎么实现

<template>
  <el-menu :default-active="activeIndex">
    <el-menu-item 
      v-for="item in menuItems" 
      :index="item.link" 
      :key="item.id"
    >
      {{ item.title }}
    </el-menu-item>
  </el-menu>
</template>