vue层级菜单实现
Vue 层级菜单实现方法
递归组件实现
使用递归组件可以高效处理无限层级的菜单结构。定义一个组件，内部调用自身渲染子菜单。
<template>
<ul>
<li v-for="item in menuData" :key="item.id">
{{ item.name }}
<menu-item v-if="item.children" :menu-data="item.children"/>
</li>
</ul>
</template>
<script>
export default {
name: 'MenuItem',
props: {
menuData: Array
}
}
</script>动态路由绑定
结合Vue Router实现菜单路由跳转，通过router-link绑定路由路径。
<router-link
v-for="item in menuList"
:to="item.path"
:key="item.id"
>
{{ item.title }}
<span v-if="item.children" class="arrow"></span>
</router-link>状态管理
使用Vuex或Pinia管理菜单展开/折叠状态，确保多级菜单交互一致性。
// store示例
state: {
expandedMenuIds: []
},
mutations: {
toggleMenu(state, menuId) {
const index = state.expandedMenuIds.indexOf(menuId)
index === -1
? state.expandedMenuIds.push(menuId)
: state.expandedMenuIds.splice(index, 1)
}
}样式处理
通过CSS实现菜单缩进和动画效果，增强视觉层次感。
.menu-item {
padding-left: 20px;
transition: all 0.3s;
}
.sub-menu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.sub-menu.expanded {
max-height: 500px;
}性能优化
对于大型菜单数据，可采用虚拟滚动技术减少DOM节点数量。
<virtual-list
:size="40"
:remain="8"
:data="flattenMenuData"
>
<template v-slot="{ item }">
<menu-item :item="item"/>
</template>
</virtual-list>数据格式规范
推荐使用标准化的菜单数据结构，便于组件处理。
const menuData = [
{
id: 1,
name: '一级菜单',
icon: 'folder',
children: [
{
id: 11,
name: '二级菜单',
path: '/submenu'
}
]
}
]权限控制
结合角色权限过滤可见菜单项，实现动态菜单渲染。
computed: {
filteredMenu() {
return this.menuData.filter(item =>
this.$auth.hasPermission(item.requiredRole)
)
}
}
