当前位置：首页 > VUE

vue菜单管理如何实现

2026-02-25 01:05:03VUE

Vue 菜单管理实现方案

基于路由的动态菜单

在Vue项目中，可以通过路由配置生成动态菜单。结合Vue Router的路由元信息（meta）来标记菜单项属性：

// router.js
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: '用户列表' }
      }
    ]
  }
]

菜单组件实现

创建可复用的菜单组件，递归处理多级菜单结构：

<template>
  <el-menu :default-active="activeMenu" router>
    <menu-item 
      v-for="route in permissionRoutes" 
      :key="route.path" 
      :item="route"
    />
  </el-menu>
</template>

<script>
import MenuItem from './MenuItem.vue'

export default {
  components: { MenuItem },
  computed: {
    permissionRoutes() {
      return this.$router.options.routes.filter(route => {
        return route.meta && !route.meta.hidden
      })
    }
  }
}
</script>

权限控制集成

结合角色权限过滤菜单项，可以在路由守卫或全局前置钩子中处理：

// permission.js
router.beforeEach(async (to, from, next) => {
  const hasRoles = store.getters.roles && store.getters.roles.length > 0
  if (hasRoles) {
    next()
  } else {
    const { roles } = await store.dispatch('user/getInfo')
    const accessRoutes = await store.dispatch('permission/generateRoutes', roles)
    router.addRoutes(accessRoutes)
    next({ ...to, replace: true })
  }
})

后端控制方案

对于需要后端控制的菜单系统，可以设计以下数据结构：

{
  "id": 1,
  "parentId": 0,
  "name": "系统管理",
  "path": "/system",
  "component": "Layout",
  "meta": {
    "title": "系统管理",
    "icon": "system",
    "hidden": false
  }
}

通过API获取菜单数据后转换为路由配置：

function filterAsyncRoutes(routes) {
  return routes.map(route => {
    const tmp = { ...route }
    if (tmp.component === 'Layout') {
      tmp.component = Layout
    } else {
      tmp.component = loadView(route.component)
    }
    if (tmp.children) {
      tmp.children = filterAsyncRoutes(tmp.children)
    }
    return tmp
  })
}

状态管理

使用Vuex或Pinia管理菜单状态：

// store/modules/permission.js
const state = {
  routes: [],
  addRoutes: []
}

const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes
    state.routes = constantRoutes.concat(routes)
  }
}

响应式处理

监听路由变化动态更新菜单激活状态：

watch(() => route.path, () => {
  const matched = route.matched.filter(item => item.meta && item.meta.title)
  if (matched.length) {
    document.title = matched[matched.length - 1].meta.title
  }
})

菜单样式优化

使用CSS变量实现主题定制：

vue菜单管理如何实现

:root {
  --menu-bg-color: #304156;
  --menu-text-color: #bfcbd9;
  --menu-active-color: #409EFF;
}

.el-menu {
  background-color: var(--menu-bg-color);
  .el-menu-item {
    color: var(--menu-text-color);
    &:hover {
      background-color: var(--menu-hover-bg);
    }
    &.is-active {
      color: var(--menu-active-color);
    }
  }
}