vue实现菜单管理
Vue 实现菜单管理方案
方案一：基于路由的动态菜单 通过 Vue Router 的路由配置自动生成菜单结构，适用于权限管理系统。在路由元信息(meta)中添加菜单相关配置：
const routes = [
{
path: '/dashboard',
component: Dashboard,
meta: {
title: '控制台',
icon: 'el-icon-monitor',
requiresAuth: true
}
},
{
path: '/user',
component: UserLayout,
meta: {
title: '用户管理',
icon: 'el-icon-user'
},
children: [
{
path: 'list',
component: UserList,
meta: { title: '用户列表' }
}
]
}
]方案二：独立菜单数据结构 当菜单需要独立于路由存在时，可采用树形数据结构：
const menuData = [
{
id: 1,
name: '系统管理',
icon: 'setting',
children: [
{
id: 11,
name: '用户管理',
path: '/user'
}
]
}
]递归组件实现 创建可递归渲染的菜单组件：
<template>
<ul class="menu">
<li v-for="item in menuData" :key="item.id">
<router-link v-if="!item.children" :to="item.path">
<i :class="item.icon"></i>
<span>{{ item.name }}</span>
</router-link>
<template v-else>
<div class="submenu-title">
<i :class="item.icon"></i>
<span>{{ item.name }}</span>
</div>
<menu-tree :menu-data="item.children"></menu-tree>
</template>
</li>
</ul>
</template>
<script>
export default {
name: 'MenuTree',
props: {
menuData: Array
}
}
</script>状态管理集成 结合 Vuex 管理菜单状态：
// store/modules/menu.js
export default {
state: {
collapsed: false,
activeMenu: ''
},
mutations: {
TOGGLE_COLLAPSE(state) {
state.collapsed = !state.collapsed
}
}
}权限控制实现 根据用户角色过滤菜单项：
function filterMenu(menu, roles) {
return menu.filter(item => {
if (item.meta?.roles) {
return item.meta.roles.some(role => roles.includes(role))
}
return true
})
}响应式布局优化 使用 CSS 媒体查询实现响应式折叠：
@media screen and (max-width: 992px) {
.menu-container {
width: 64px;
overflow: hidden;
}
}性能优化建议
- 对大型菜单使用虚拟滚动
- 使用 keep-alive 缓存菜单状态
- 对静态菜单数据进行 Object.freeze 处理
完整示例项目结构
src/
├── components/
│ ├── Menu/
│ │ ├── MenuTree.vue
│ │ └── MenuItem.vue
├── router/
│ ├── index.js
│ └── asyncRoutes.js
├── store/
│ └── modules/
│ └── menu.js
└── utils/
└── permission.js
