当前位置：首页 > VUE

vue3实现菜单

2026-01-21 19:45:56VUE

Vue3 实现菜单的基本方法

使用 Vue3 的 Composition API 和响应式特性可以高效地实现动态菜单。以下是一个基础实现方案：

创建菜单数据结构

const menuItems = ref([
  {
    title: '首页',
    path: '/',
    children: []
  },
  {
    title: '产品',
    path: '/products',
    children: [
      { title: '产品列表', path: '/products/list' }
    ]
  }
])

递归组件实现多级菜单

<template>
  <ul>
    <li v-for="item in items" :key="item.path">
      <router-link :to="item.path">{{ item.title }}</router-link>
      <menu-item v-if="item.children?.length" :items="item.children"/>
    </li>
  </ul>
</template>

<script setup>
defineProps({
  items: {
    type: Array,
    required: true
  }
})
</script>

使用 Vue Router 集成

结合 Vue Router 可以实现路由跳转和菜单高亮：

vue3实现菜单

import { useRoute } from 'vue-router'

const route = useRoute()
const isActive = (path) => {
  return route.path === path
}

动态菜单权限控制

通过权限验证动态生成菜单：

const filteredMenu = computed(() => {
  return menuItems.value.filter(item => {
    return checkPermission(item.requiredRole)
  })
})

菜单状态管理

使用 Pinia 管理菜单展开状态：

vue3实现菜单

// stores/menu.js
export const useMenuStore = defineStore('menu', {
  state: () => ({
    expandedItems: []
  }),
  actions: {
    toggleExpand(path) {
      const index = this.expandedItems.indexOf(path)
      index === -1 
        ? this.expandedItems.push(path)
        : this.expandedItems.splice(index, 1)
    }
  }
})

响应式菜单样式

添加 CSS 过渡效果增强用户体验：

.menu-enter-active,
.menu-leave-active {
  transition: all 0.3s ease;
}

.menu-enter-from,
.menu-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

移动端适配方案

实现可折叠的移动端菜单：

<template>
  <button @click="toggleMobileMenu">菜单</button>
  <transition name="menu">
    <div v-show="isMobileMenuOpen" class="mobile-menu">
      <menu-item :items="menuItems"/>
    </div>
  </transition>
</template>

性能优化建议

对于大型菜单系统，考虑虚拟滚动技术：

import { useVirtualList } from '@vueuse/core'

const { list, containerProps } = useVirtualList(
  menuItems,
  { itemHeight: 48 }
)

这些实现方式可以根据具体需求进行组合和扩展，构建出功能完善且用户体验良好的菜单系统。

标签: 菜单

分享给朋友：

vue实现菜单管理

Vue 实现菜单管理方案方案一：基于路由的动态菜单通过 Vue Router 的路由配置自动生成菜单结构，适用于权限管理系统。在路由元信息(meta)中添加菜单相关配置： const rout…

react如何实现菜单

使用 React 实现菜单的方法使用状态管理控制菜单显示/隐藏通过 useState 管理菜单的展开和收起状态，结合点击事件切换状态。 import { useState } from 're…

vue实现悬浮菜单

实现悬浮菜单的基本思路使用Vue实现悬浮菜单通常需要结合CSS定位和Vue的事件监听。核心是通过v-show或v-if控制菜单显隐，通过鼠标事件触发状态变化。 HTML结构示例 <temp…

vue实现菜单关闭

Vue 实现菜单关闭功能在 Vue 中实现菜单关闭功能可以通过多种方式完成，以下是几种常见的方法：使用 v-if 或 v-show 控制显示通过数据绑定控制菜单的显示与隐藏。v-if 会完全移…

vue实现菜单递归

Vue 实现菜单递归的方法在 Vue 中实现菜单递归通常需要组件调用自身，适用于多级嵌套的菜单结构。以下是几种常见的实现方式：使用递归组件递归组件是 Vue 中实现菜单递归的最直接方法。组件通…

vue 实现多级菜单

实现多级菜单的基本思路在Vue中实现多级菜单通常需要递归组件或动态渲染嵌套数据结构。核心是通过组件递归调用自身，或利用v-for遍历嵌套的菜单数据。递归组件实现方式定义菜单数据结构数据格…

vue3实现菜单