探索vue-Element-ui构建的无限级菜单世界

2023-10-10 17:01:53

构建无限级菜单：vue-Element-UI 的终极指南

在现代前端开发中，菜单作为导航组件不可或缺，影响着用户体验，并在易用性上举足轻重。对于具有庞大数据结构和复杂权限控制的系统，无限级菜单更是不可替代。

本文将深入探讨如何利用 vue-Element-UI 构建一个功能完善的无限级菜单。我们将探索数据结构的设计、递归算法的应用、路由控制和权限管理的整合，帮助读者掌握构建无限级菜单的精髓。

一、无限级菜单的数据结构

无限级菜单通常采用树形结构或递归结构，都能有效表达菜单之间的层级关系。在 vue-Element-UI 中，我们可以使用数组或对象来存储菜单数据。

1. 数组结构

const menuData = [
  {
    id: 1,
    name: '系统管理',
    parentId: null,
  },
  {
    id: 2,
    name: '用户管理',
    parentId: 1,
  },
  {
    id: 3,
    name: '角色管理',
    parentId: 1,
  },
  {
    id: 4,
    name: '权限管理',
    parentId: 1,
  },
  {
    id: 5,
    name: '商品管理',
    parentId: null,
  },
  {
    id: 6,
    name: '商品分类',
    parentId: 5,
  },
  {
    id: 7,
    name: '商品列表',
    parentId: 5,
  },
];

2. 对象结构

const menuData = {
  1: {
    id: 1,
    name: '系统管理',
    parentId: null,
  },
  2: {
    id: 2,
    name: '用户管理',
    parentId: 1,
  },
  3: {
    id: 3,
    name: '角色管理',
    parentId: 1,
  },
  4: {
    id: 4,
    name: '权限管理',
    parentId: 1,
  },
  5: {
    id: 5,
    name: '商品管理',
    parentId: null,
  },
  6: {
    id: 6,
    name: '商品分类',
    parentId: 5,
  },
  7: {
    id: 7,
    name: '商品列表',
    parentId: 5,
  },
};

二、递归算法的应用

无论是数组还是对象结构，构建无限级菜单都需要递归算法。递归算法将问题分解成更小的子问题，通过不断自我调用来解决。

1. 递归算法的基本原理

递归算法的基本原理是将问题分解成更小的子问题，通过不断自我调用来解决。在构建无限级菜单时，我们可以将菜单数据分解成更小的子菜单数据，通过递归遍历这些子菜单数据，根据菜单项的层级关系生成相应的 HTML 结构。

2. 递归算法的实现

在 vue-Element-UI 中，我们可以使用 vuex 来管理菜单数据。在 vuex 中，我们可以定义一个名为 "menu" 的 state，并通过递归函数来遍历菜单数据，根据菜单项的层级关系生成相应的 HTML 结构。

// vuex/modules/menu.js
const state = {
  menuData: [
    {
      id: 1,
      name: '系统管理',
      parentId: null,
    },
    {
      id: 2,
      name: '用户管理',
      parentId: 1,
    },
    {
      id: 3,
      name: '角色管理',
      parentId: 1,
    },
    {
      id: 4,
      name: '权限管理',
      parentId: 1,
    },
    {
      id: 5,
      name: '商品管理',
      parentId: null,
    },
    {
      id: 6,
      name: '商品分类',
      parentId: 5,
    },
    {
      id: 7,
      name: '商品列表',
      parentId: 5,
    },
  ],
};

const mutations = {
  setMenuData(state, menuData) {
    state.menuData = menuData;
  },
};

const actions = {
  generateMenuData({ commit, state }) {
    const menuData = state.menuData;
    const treeData = [];
    const loop = (data, parentId) => {
      data.forEach(item => {
        if (item.parentId === parentId) {
          const children = loop(data, item.id);
          if (children.length > 0) {
            item.children = children;
          }
          treeData.push(item);
        }
      });
      return treeData;
    };
    commit('setMenuData', loop(menuData, null));
  },
};

const getters = {
  getMenuData: state => state.menuData,
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters,
};

三、路由控制和权限管理的整合

构建无限级菜单时，还需要考虑路由控制和权限管理。路由控制根据 URL 地址加载页面，权限管理控制用户对页面和操作的访问权限。

1. 路由控制

在 vue-Element-UI 中，我们可以使用 vue-router 来进行路由控制。在 vue-router 中，我们可以定义路由规则，并通过导航守卫来控制用户访问权限。

// router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
import System from '../views/System.vue';
import User from '../views/User.vue';
import Role from '../views/Role.vue';
import Permission from '../views/Permission.vue';
import Product from '../views/Product.vue';
import Category from '../views/Category.vue';
import List from '../views/List.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
  {
    path: '/system',
    name: 'System',
    component: System,
  },
  {
    path: '/user',
    name: 'User',
    component: User,
  },
  {
    path: '/role',
    name: 'Role',
    component: Role,
  },
  {
    path: '/permission',
    name: 'Permission',
    component: Permission,
  },
  {
    path: '/product',
    name: 'Product',
    component: Product,
  },
  {
    path: '/category',
    name: 'Category',
    component: Category,
  },
  {
    path: '/list',
    name: 'List',
    component: List,
  },
];

const router = new VueRouter({
  routes,
});

export default router;

2. 权限管理

在 vue-Element-UI 中，我们可以使用 vuex 来进行权限管理。在 vuex 中，我们可以定义一个名为 "permission" 的 state，并根据用户的角色和权限控制其访问权限。

// vuex/modules/permission.js
const state = {
  permissions: [],
};

const mutations = {
  setPermissions(state, permissions) {
    state.permissions = permissions;
  },
};

const actions = {
  getPermissions({ commit, state }) {
    const permissions = []; // 从服务器获取权限数据
    commit('setPermissions', permissions);
  },
};

const getters = {
  getPermissions: state => state.permissions,
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters,
};