vue 实现菜单
vue 实现菜单的常见方法
使用 Vue 实现菜单功能通常涉及动态渲染、路由集成和状态管理。以下是几种常见实现方式：
基于路由的菜单
Vue Router 可以与菜单组件结合，实现导航功能。定义路由时添加 meta 字段存储菜单信息：
const routes = [
{
path: '/dashboard',
component: Dashboard,
meta: { title: '控制台', icon: 'el-icon-menu' }
},
{
path: '/user',
component: User,
meta: { title: '用户管理', icon: 'el-icon-user' }
}
]在菜单组件中通过 this.$router.options.routes 获取路由配置，使用 v-for 循环渲染菜单项。
递归组件实现多级菜单
对于嵌套菜单结构，可创建递归组件处理无限层级：
<template>
<ul>
<li v-for="item in menuData" :key="item.path">
<span>{{ item.title }}</span>
<menu-tree v-if="item.children" :menu-data="item.children"/>
</li>
</ul>
</template>
<script>
export default {
name: 'MenuTree',
props: ['menuData']
}
</script>使用状态管理维护菜单状态
当需要跨组件共享菜单状态时，可采用 Vuex：
// store.js
export default new Vuex.Store({
state: {
collapsed: false // 控制菜单折叠状态
},
mutations: {
toggleMenu(state) {
state.collapsed = !state.collapsed
}
}
})结合 UI 框架实现
Element UI 等框架提供现成的菜单组件：
<template>
<el-menu :default-active="activeIndex" mode="horizontal">
<el-menu-item index="1">首页</el-menu-item>
<el-submenu index="2">
<template slot="title">产品</template>
<el-menu-item index="2-1">选项1</el-menu-item>
</el-submenu>
</el-menu>
</template>动态权限菜单实现
根据用户权限过滤菜单项：
computed: {
filteredMenus() {
return this.allMenus.filter(menu => {
return this.userPermissions.includes(menu.permission)
})
}
}关键注意事项
- 为菜单项添加唯一的 key 属性提高渲染性能
- 使用路由守卫处理菜单权限控制
- 移动端需考虑响应式设计和汉堡菜单实现
- 复杂项目建议将菜单数据与路由配置分离管理
以上方法可根据具体需求组合使用，Element UI、Ant Design Vue 等框架文档提供了完整的菜单组件示例可供参考。
