Element Plus导航菜单：Menu多级菜单与路由集成-CSDN博客

Element Plus导航菜单：Menu多级菜单与路由集成

【免费下载链接】element-plus element-plus/element-plus: Element Plus 是一个基于 Vue 3 的组件库，提供了丰富且易于使用的 UI 组件，用于快速搭建企业级桌面和移动端的前端应用。项目地址: https://gitcode.com/GitHub_Trending/el/element-plus

在现代Web应用中，导航菜单是用户界面的核心组件之一。Element Plus作为基于Vue 3的企业级UI组件库，提供了功能强大且灵活的Menu组件，支持多级嵌套菜单和与Vue Router的无缝集成。本文将深入探讨如何高效使用Element Plus的Menu组件构建复杂的导航系统。

为什么选择Element Plus Menu组件？

Element Plus的Menu组件具有以下核心优势：

双向模式支持：垂直和水平两种布局模式
多级嵌套：支持无限层级菜单结构
路由集成：与Vue Router深度集成，自动处理路由跳转
响应式设计：支持折叠模式和溢出处理
丰富的API：提供完整的配置选项和事件系统

基础菜单结构

让我们从最基本的菜单结构开始：

<template>
  <el-menu default-active="1" mode="vertical">
    <el-menu-item index="1">
      <el-icon><House /></el-icon>
      <span>首页</span>
    </el-menu-item>
    <el-menu-item index="2">
      <el-icon><User /></el-icon>
      <span>用户管理</span>
    </el-menu-item>
    <el-sub-menu index="3">
      <template #title>
        <el-icon><Setting /></el-icon>
        <span>系统设置</span>
      </template>
      <el-menu-item index="3-1">基本设置</el-menu-item>
      <el-menu-item index="3-2">权限配置</el-menu-item>
      <el-menu-item index="3-3">日志管理</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { House, User, Setting } from '@element-plus/icons-vue'
</script>

多级菜单嵌套实战

Element Plus支持无限层级的菜单嵌套，这对于复杂的企业应用至关重要：

<template>
  <el-menu default-active="2-3-1" mode="vertical">
    <el-sub-menu index="1">
      <template #title>产品管理</template>
      <el-sub-menu index="1-1">
        <template #title>产品分类</template>
        <el-menu-item index="1-1-1">电子产品</el-menu-item>
        <el-menu-item index="1-1-2">服装鞋帽</el-menu-item>
        <el-menu-item index="1-1-3">家居用品</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="1-2">
        <template #title>库存管理</template>
        <el-menu-item index="1-2-1">入库管理</el-menu-item>
        <el-menu-item index="1-2-2">出库管理</el-menu-item>
        <el-menu-item index="1-2-3">库存查询</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
    
    <el-sub-menu index="2">
      <template #title>订单管理</template>
      <el-sub-menu index="2-1">
        <template #title>订单处理</template>
        <el-menu-item index="2-1-1">待处理订单</el-menu-item>
        <el-menu-item index="2-1-2">已发货订单</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="2-2">
        <template #title>售后管理</template>
        <el-menu-item index="2-2-1">退款申请</el-menu-item>
        <el-menu-item index="2-2-2">退货处理</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="2-3">
        <template #title>报表统计</template>
        <el-menu-item index="2-3-1">销售报表</el-menu-item>
        <el-menu-item index="2-3-2">客户报表</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
  </el-menu>
</template>

Vue Router深度集成

Element Plus Menu组件与Vue Router的集成是其最强大的功能之一：

<template>
  <el-menu
    :default-active="$route.path"
    mode="vertical"
    router
    unique-opened
  >
    <el-menu-item index="/dashboard">
      <el-icon><House /></el-icon>
      <span>控制台</span>
    </el-menu-item>
    
    <el-sub-menu index="/user">
      <template #title>
        <el-icon><User /></el-icon>
        <span>用户管理</span>
      </template>
      <el-menu-item index="/user/list">用户列表</el-menu-item>
      <el-menu-item index="/user/roles">角色管理</el-menu-item>
      <el-menu-item index="/user/permissions">权限配置</el-menu-item>
    </el-sub-menu>
    
    <el-sub-menu index="/product">
      <template #title>
        <el-icon><Goods /></el-icon>
        <span>产品管理</span>
      </template>
      <el-menu-item index="/product/category">产品分类</el-menu-item>
      <el-menu-item index="/product/list">产品列表</el-menu-item>
      <el-menu-item index="/product/stock">库存管理</el-menu-item>
    </el-sub-menu>
    
    <el-menu-item index="/settings">
      <el-icon><Setting /></el-icon>
      <span>系统设置</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { House, User, Goods, Setting } from '@element-plus/icons-vue'
import { useRoute } from 'vue-router'

const $route = useRoute()
</script>

路由参数与动态菜单

对于需要传递参数的路由，可以使用route属性：

<template>
  <el-menu
    :default-active="$route.path"
    mode="vertical"
    router
  >
    <el-sub-menu index="user-management">
      <template #title>用户管理</template>
      <el-menu-item 
        index="user-detail" 
        :route="{ path: '/user/detail', query: { id: '123' } }"
      >
        用户详情
      </el-menu-item>
      <el-menu-item 
        index="user-edit" 
        :route="{ name: 'UserEdit', params: { userId: '456' } }"
      >
        编辑用户
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

水平导航菜单

水平导航菜单适用于顶部导航栏场景：

<template>
  <el-menu
    mode="horizontal"
    :default-active="$route.path"
    router
    ellipsis
  >
    <el-menu-item index="/">首页</el-menu-item>
    <el-menu-item index="/products">产品</el-menu-item>
    <el-sub-menu index="solutions">
      <template #title>解决方案</template>
      <el-menu-item index="/solutions/enterprise">企业版</el-menu-item>
      <el-menu-item index="/solutions/education">教育版</el-menu-item>
      <el-menu-item index="/solutions/healthcare">医疗版</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="/pricing">定价</el-menu-item>
    <el-menu-item index="/about">关于我们</el-menu-item>
    <el-menu-item index="/contact">联系我们</el-menu-item>
  </el-menu>
</template>

<style scoped>
.el-menu--horizontal {
  --el-menu-horizontal-height: 60px;
}
</style>

折叠菜单模式

折叠模式特别适合侧边栏导航：

<template>
  <div class="layout-container">
    <el-button @click="collapse = !collapse" class="toggle-btn">
      <el-icon><Expand v-if="collapse" /><Fold v-else /></el-icon>
    </el-button>
    
    <el-menu
      :default-active="$route.path"
      mode="vertical"
      :collapse="collapse"
      router
      class="sidebar-menu"
    >
      <el-menu-item index="/dashboard">
        <el-icon><House /></el-icon>
        <template #title>控制台</template>
      </el-menu-item>
      
      <el-sub-menu index="analytics">
        <template #title>
          <el-icon><DataAnalysis /></el-icon>
          <span>数据分析</span>
        </template>
        <el-menu-item index="/analytics/sales">销售分析</el-menu-item>
        <el-menu-item index="/analytics/users">用户分析</el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { House, DataAnalysis, Expand, Fold } from '@element-plus/icons-vue'

const collapse = ref(false)
</script>

<style scoped>
.layout-container {
  display: flex;
  flex-direction: column;
}

.toggle-btn {
  margin: 10px;
  align-self: flex-start;
}

.sidebar-menu:not(.el-menu--collapse) {
  width: 200px;
}
</style>

菜单事件处理

Element Plus提供了丰富的事件系统：

<template>
  <el-menu
    :default-active="activeIndex"
    mode="vertical"
    @select="handleSelect"
    @open="handleOpen"
    @close="handleClose"
  >
    <el-sub-menu index="1">
      <template #title>菜单事件示例</template>
      <el-menu-item index="1-1">选项1</el-menu-item>
      <el-menu-item index="1-2">选项2</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const activeIndex = ref('')

const handleSelect = (index, indexPath, item, routerResult) => {
  ElMessage.success(`选择了菜单项: ${index}, 路径: ${indexPath.join(' -> ')}`)
  
  if (routerResult) {
    routerResult.then(result => {
      if (result) {
        ElMessage.warning('路由导航被中断')
      }
    })
  }
}

const handleOpen = (index, indexPath) => {
  console.log('打开子菜单:', index, indexPath)
}

const handleClose = (index, indexPath) => {
  console.log('关闭子菜单:', index, indexPath)
}
</script>

动态菜单生成

对于需要从API获取菜单数据的场景：

<template>
  <el-menu
    :default-active="$route.path"
    mode="vertical"
    router
  >
    <template v-for="item in menuData" :key="item.id">
      <el-sub-menu v-if="item.children" :index="item.path">
        <template #title>
          <el-icon v-if="item.icon">
            <component :is="item.icon" />
          </el-icon>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item
          v-for="child in item.children"
          :key="child.id"
          :index="child.path"
        >
          {{ child.title }}
        </el-menu-item>
      </el-sub-menu>
      
      <el-menu-item v-else :index="item.path">
        <el-icon v-if="item.icon">
          <component :is="item.icon" />
        </el-icon>
        <template #title>{{ item.title }}</template>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { House, User, Setting, Goods } from '@element-plus/icons-vue'

const menuData = ref([])

onMounted(async () => {
  // 模拟API调用
  menuData.value = [
    {
      id: 1,
      title: '控制台',
      path: '/dashboard',
      icon: House
    },
    {
      id: 2,
      title: '用户管理',
      path: '/user',
      icon: User,
      children: [
        { id: 21, title: '用户列表', path: '/user/list' },
        { id: 22, title: '角色管理', path: '/user/roles' }
      ]
    },
    {
      id: 3,
      title: '产品管理',
      path: '/product',
      icon: Goods,
      children: [
        { id: 31, title: '产品分类', path: '/product/category' },
        { id: 32, title: '产品列表', path: '/product/list' }
      ]
    }
  ]
})
</script>

权限控制菜单

结合权限系统实现动态菜单显示：

<template>
  <el-menu
    :default-active="$route.path"
    mode="vertical"
    router
  >
    <template v-for="item in filteredMenu" :key="item.id">
      <el-sub-menu v-if="hasChildren(item)" :index="item.path">
        <template #title>
          <el-icon v-if="item.icon">
            <component :is="item.icon" />
          </el-icon>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item
          v-for="child in item.children"
          :key="child.id"
          :index="child.path"
          v-show="hasPermission(child.permission)"
        >
          {{ child.title }}
        </el-menu-item>
      </el-sub-menu>
      
      <el-menu-item
        v-else
        :index="item.path"
        v-show="hasPermission(item.permission)"
      >
        <el-icon v-if="item.icon">
          <component :is="item.icon" />
        </el-icon>
        <template #title>{{ item.title }}</template>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script setup>
import { computed } from 'vue'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()

const fullMenu = [
  {
    id: 1,
    title: '仪表盘',
    path: '/dashboard',
    permission: 'dashboard.view'
  },
  {
    id: 2,
    title: '用户管理',
    path: '/user',
    permission: 'user.view',
    children: [
      { id: 21, title: '用户列表', path: '/user/list', permission: 'user.list' },
      { id: 22, title: '角色管理', path: '/user/roles', permission: 'role.manage' }
    ]
  }
]

const hasPermission = (permission) => {
  return userStore.permissions.includes(permission)
}

const hasChildren = (item) => {
  return item.children && item.children.some(child => hasPermission(child.permission))
}

const filteredMenu = computed(() => {
  return fullMenu.filter(item => {
    if (item.children) {
      return hasChildren(item)
    }
    return hasPermission(item.permission)
  })
})
</script>

菜单样式定制

Element Plus提供了丰富的CSS变量用于样式定制：

<template>
  <el-menu
    class="custom-menu"
    :default-active="$route.path"
    mode="vertical"
    router
  >
    <el-menu-item index="/dashboard">控制台</el-menu-item>
    <el-sub-menu index="/system">
      <template #title>系统设置</template>
      <el-menu-item index="/system/basic">基本设置</el-menu-item>
      <el-menu-item index="/system/advanced">高级设置</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<style scoped>
.custom-menu {
  --el-menu-bg-color: #2d3a4b;
  --el-menu-text-color: #bfcbd9;
  --el-menu-active-color: #409eff;
  --el-menu-hover-bg-color: #263445;
  --el-menu-item-height: 56px;
  --el-menu-sub-item-height: 50px;
  --el-menu-horizontal-submenu-height: 50px;
}

.custom-menu .el-menu-item {
  transition: all 0.3s;
}

.custom-menu .el-menu-item:hover {
  background-color: var(--el-menu-hover-bg-color);
  transform: translateX(5px);
}

.custom-menu .el-sub-menu__title:hover {
  background-color: var(--el-menu-hover-bg-color);
}
</style>

最佳实践与性能优化

1. 菜单数据结构优化

// 使用扁平化数据结构提高性能
const flattenMenu = (menuData) => {
  const result = []
  const flatten = (items, parentPath = '') => {
    items.forEach(item => {
      const fullPath = parentPath ? `${parentPath}/${item.path}` : item.path
      result.push({ ...item, fullPath })
      if (item.children) {
        flatten(item.children, fullPath)
      }
    })
  }
  flatten(menuData)
  return result
}

2. 路由懒加载与菜单结合

// router.js
const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue'),
    meta: { menu: 'dashboard' }
  },
  {
    path: '/user',
    component: () => import('@/views/UserLayout.vue'),
    children: [
      {
        path: 'list',
        component: () => import('@/views/UserList.vue'),
        meta: { menu: 'user.list' }
      }
    ]
  }
]

3. 菜单状态持久化

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const defaultActive = ref('')

// 从localStorage恢复菜单状态
onMounted(() => {
  const savedActive = localStorage.getItem('menu-active')
  if (savedActive) {
    defaultActive.value = savedActive
  } else {
    defaultActive.value = route.path
  }
})

// 保存菜单状态
watch(() => route.path, (newPath) => {
  defaultActive.value = newPath
  localStorage.setItem('menu-active', newPath)
})
</script>

常见问题与解决方案

Q1: 菜单激活状态不更新？

A: 确保使用:default-active绑定响应式变量，并在路由变化时更新。

Q2: 多级菜单路由跳转异常？

A: 检查路由配置是否正确，确保子路由路径以父路由路径开头。

Q3: 菜单性能问题？

A: 对于大型菜单，使用虚拟滚动或分页加载菜单项。

Q4: 动态菜单更新不及时？

A: 使用Vue的响应式系统，确保菜单数据是响应式对象。

总结

Element Plus的Menu组件为Vue 3应用提供了强大而灵活的导航解决方案。通过本文的深入探讨，您应该能够：

掌握多级菜单的构建方法
实现与Vue Router的无缝集成
处理复杂的权限控制场景
优化菜单性能和用户体验
定制个性化的菜单样式

记住，良好的导航设计不仅仅是技术实现，更是用户体验的重要组成部分。合理运用Element Plus Menu组件的各种特性，将为您的应用带来专业级的导航体验。

下一步学习建议：

探索Menu组件的高级特性如自定义图标、动画效果
学习与Vuex/Pinia状态管理的结合使用
研究响应式菜单在不同设备上的适配方案
了解无障碍访问（Accessibility）最佳实践

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考