vue实现的菜单管理

Vue 实现菜单管理的核心方案

数据结构设计

菜单数据通常采用树形结构存储，包含以下字段：

{
  id: Number,
  name: String,
  path: String,
  icon: String,
  children: Array
}

递归组件实现

创建MenuComponent.vue递归组件：

<template>
  <div v-for="item in menuData" :key="item.id">
    <router-link v-if="!item.children" :to="item.path">
      <i :class="item.icon"></i>
      <span>{{ item.name }}</span>
    </router-link>
    <div v-else>
      <div @click="toggleSubMenu(item)">
        <i :class="item.icon"></i>
        <span>{{ item.name }}</span>
      </div>
      <MenuComponent 
        v-show="item.expanded"
        :menu-data="item.children"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'MenuComponent',
  props: ['menuData'],
  methods: {
    toggleSubMenu(item) {
      this.$set(item, 'expanded', !item.expanded)
    }
  }
}
</script>

状态管理方案

使用Vuex存储菜单状态：

// store/modules/menu.js
const state = {
  menuItems: [],
  activeMenu: null
}

const mutations = {
  SET_MENUS(state, menus) {
    state.menuItems = menus
  },
  SET_ACTIVE_MENU(state, menu) {
    state.activeMenu = menu
  }
}

const actions = {
  async fetchMenus({ commit }) {
    const res = await api.getMenus()
    commit('SET_MENUS', res.data)
  }
}

动态路由集成

结合vue-router实现权限控制：

// 路由配置示例
const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { menuId: 1 }
  },
  // 其他路由...
]

// 路由守卫中校验菜单权限
router.beforeEach((to, from, next) => {
  const hasPermission = store.getters.menus.some(
    menu => menu.id === to.meta.menuId
  )
  hasPermission ? next() : next('/403')
})

可视化菜单编辑器

实现拖拽排序功能：

<template>
  <draggable 
    v-model="menuTree" 
    group="menus"
    @end="saveMenuOrder"
  >
    <div v-for="item in menuTree" :key="item.id">
      {{ item.name }}
      <menu-editor v-if="item.children" :menu-tree="item.children"/>
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: { draggable },
  props: ['menuTree'],
  methods: {
    async saveMenuOrder() {
      await api.updateMenuOrder(this.menuTree)
    }
  }
}
</script>

性能优化建议

• 使用v-if替代v-show处理深层级菜单
• 对静态菜单数据使用Object.freeze
• 实现虚拟滚动处理超长菜单列表
• 添加菜单缓存机制减少重复请求

典型问题解决方案

菜单激活状态保持

watch: {
  '$route'() {
    this.$store.commit('SET_ACTIVE_MENU', this.findActiveMenu())
  }
},
methods: {
  findActiveMenu() {
    // 根据当前路由匹配菜单项
  }
}

多级菜单缩进处理

.menu-item {
  padding-left: 20px;
  &.level-2 {
    padding-left: 40px;
  }
  /* 更多层级... */
}