vue实现动态菜单

Vue 动态菜单实现方法

基于路由配置的动态菜单

在 Vue 项目中，可以利用路由配置自动生成菜单。路由配置通常包含 path、name、meta 等字段，其中 meta 可以存储菜单标题、图标等信息。

const routes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    meta: { title: '控制台', icon: 'el-icon-s-home' }
  },
  {
    path: '/user',
    name: 'User',
    meta: { title: '用户管理', icon: 'el-icon-user' }
  }
]

在组件中遍历路由生成菜单：

<template>
  <el-menu>
    <template v-for="route in $router.options.routes">
      <el-menu-item 
        :index="route.path" 
        v-if="!route.meta.hidden"
      >
        <i :class="route.meta.icon"></i>
        <span>{{ route.meta.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

基于权限控制的动态菜单

结合权限系统，根据用户角色过滤可访问的菜单项。通常需要在路由配置中添加 roles 字段。

const routes = [
  {
    path: '/admin',
    name: 'Admin',
    meta: { title: '管理员', roles: ['admin'] }
  },
  {
    path: '/user',
    name: 'User',
    meta: { title: '普通用户', roles: ['user', 'admin'] }
  }
]

过滤路由的逻辑：

function filterRoutes(routes, roles) {
  return routes.filter(route => {
    if (route.meta && route.meta.roles) {
      return roles.some(role => route.meta.roles.includes(role))
    }
    return true
  })
}

基于后端 API 的动态菜单

当菜单结构需要从后端获取时，可以设计类似这样的 API 响应格式：

{
  "menus": [
    {
      "name": "Dashboard",
      "path": "/dashboard",
      "icon": "dashboard",
      "children": []
    }
  ]
}

前端请求并渲染菜单：

export default {
  data() {
    return {
      menus: []
    }
  },
  async created() {
    const res = await axios.get('/api/menus')
    this.menus = res.data.menus
  }
}

递归渲染多级菜单

对于嵌套的多级菜单，需要使用递归组件：

<template>
  <el-submenu 
    v-for="menu in menus" 
    :key="menu.path" 
    :index="menu.path"
    v-if="menu.children && menu.children.length"
  >
    <template #title>
      <i :class="menu.icon"></i>
      <span>{{ menu.name }}</span>
    </template>
    <menu-item :menus="menu.children"></menu-item>
  </el-submenu>
</template>

菜单状态保持

使用 vuex 或 pinia 存储菜单状态，确保刷新后仍然保持：

// store/modules/menu.js
export default {
  state: {
    menus: []
  },
  mutations: {
    SET_MENUS(state, menus) {
      state.menus = menus
    }
  }
}

动态菜单的最佳实践

• 保持菜单数据结构扁平化，便于权限控制和渲染
• 为每个菜单项添加唯一标识符
• 考虑使用 keep-alive 缓存菜单组件
• 实现菜单的懒加载，提升性能
• 添加菜单项点击事件处理逻辑
• 考虑移动端适配，实现响应式菜单

常见问题解决方案

菜单激活状态不匹配时，可以手动设置 default-active：

<el-menu :default-active="$route.path"></el-menu>

菜单折叠状态管理：

data() {
  return {
    isCollapse: false
  }
}

动态添加菜单项：

this.$router.addRoute({
  path: '/new',
  component: () => import('./New.vue'),
  meta: { title: '新增菜单' }
})