vue 实现动态菜单
实现动态菜单的方法
动态菜单通常指根据用户权限或后端配置动态生成的导航菜单。以下是基于 Vue 的实现方案：
数据结构设计
菜单数据通常从后端接口获取，建议采用嵌套结构。例如：
[
{
"name": "Dashboard",
"path": "/dashboard",
"icon": "el-icon-menu",
"children": []
},
{
"name": "User Management",
"path": "/user",
"icon": "el-icon-user",
"children": [
{
"name": "List",
"path": "/user/list"
}
]
}
]路由配置
将菜单数据与路由配置关联：
// router.js
const routes = [
{
path: '/dashboard',
component: () => import('./views/Dashboard.vue'),
meta: { title: 'Dashboard' }
}
]菜单组件实现
创建可递归渲染的菜单组件：
<template>
<el-menu :default-active="activeMenu" router>
<menu-item v-for="item in menuData" :key="item.path" :item="item"/>
</el-menu>
</template>
<script>
import MenuItem from './MenuItem.vue'
export default {
components: { MenuItem },
props: ['menuData'],
computed: {
activeMenu() {
return this.$route.path
}
}
}
</script>递归子组件
处理多级菜单的递归渲染：
<template>
<el-submenu v-if="item.children.length" :index="item.path">
<template #title>
<i :class="item.icon"></i>
<span>{{ item.name }}</span>
</template>
<menu-item
v-for="child in item.children"
:key="child.path"
:item="child"
/>
</el-submenu>
<el-menu-item v-else :index="item.path">
<i :class="item.icon"></i>
<span>{{ item.name }}</span>
</el-menu-item>
</template>
<script>
export default {
name: 'MenuItem',
props: ['item']
}
</script>权限控制
在导航守卫中实现权限验证：
// permission.js
router.beforeEach(async (to, from, next) => {
const hasAccess = await checkPermission(to.meta.roles)
if (!hasAccess) next('/403')
else next()
})数据获取
在应用初始化时获取菜单数据：
// App.vue
created() {
this.$store.dispatch('user/fetchMenuData').then(menuData => {
this.menuData = processMenuData(menuData)
})
}优化建议
- 添加菜单缓存机制避免重复请求
- 实现菜单排序功能
- 添加菜单状态持久化（如 localStorage）
- 考虑使用 Vuex 集中管理菜单状态
- 对图标字段做兼容处理（支持 iconfont/svg/component）
