当前位置：首页 > 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 可以实现路由跳转和菜单高亮：

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 管理菜单展开状态：

// 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>

性能优化建议

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

vue3实现菜单

import { useVirtualList } from '@vueuse/core'

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

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

标签: 菜单

分享给朋友：

css制作下拉菜单

使用纯CSS制作下拉菜单通过HTML和CSS可以创建无需JavaScript的下拉菜单，主要利用:hover伪类和display属性控制显示隐藏。 HTML结构示例： <div class…

js实现菜单

实现基本HTML结构使用HTML创建菜单的基本框架，通常包含<ul>和<li>元素。示例结构如下： <ul id="menu"> <li><…

vue实现抽屉菜单

Vue 实现抽屉菜单使用 Vue 过渡和 CSS 实现通过 Vue 的过渡组件和 CSS 实现抽屉菜单的动画效果。定义一个布尔值控制抽屉的显示和隐藏，利用 CSS 过渡效果实现平滑的滑动。 &l…

菜单树实现vue

实现 Vue 菜单树的方法递归组件实现使用 Vue 的递归组件特性可以轻松实现菜单树结构。递归组件允许组件在模板中调用自身，适用于树形结构的数据展示。 <template> &l…

vue实现多级菜单

Vue 实现多级菜单的方法递归组件实现递归组件是处理多级菜单的常见方式，通过组件调用自身实现无限层级嵌套。 <template> <ul> <li v-…

vue实现垂直菜单

实现垂直菜单的基本结构在Vue中实现垂直菜单，通常需要使用<ul>和li>标签构建菜单项，结合Vue的v-for指令动态渲染菜单数据。以下是一个基础模板： <templat…

vue3实现菜单