vue2+antd——实现动态菜单路由功能—

这篇具有很好参考价值的文章主要介绍了vue2+antd——实现动态菜单路由功能——基础积累。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

最近在写后台管理系统，遇到一个需求就是要将之前的静态路由改为动态路由，使用的后台框架是： vue-antd-admin

实现的需求：

在页面开始登录时，通过路由接口可以获取到所有有权限的菜单数据。

然后通过loadRoutes方法来实现异步动态路由。

效果图——动态菜单的参数效果图如下：

vue2+antd——实现动态菜单路由功能——基础积累,antd,vue基础知识,js必会知识点,windows

在account.js中的refreshPermissions函数中添加以下代码

如上图所示，需要在登录接口调用成功后，书写以下的代码：
import { loadRoutes } from '@/utils/routerUtil.js';
import { getCodeList } from '@/services/menu';//获取权限的接口，我这边是获取权限成功后，再去获取动态菜单，其实这个逻辑是可以异步处理的。

actions: {
 refreshPermissions({ commit }, callback) {
   getCodeList().then((res) => {
     let permissions = [];
     res &&
       res.map((x) => {
         permissions.push({
           id: x,
           operation: [],
         });
       });
     commit('setPermissions', permissions);
   });
   loadRoutes();
   callback && callback('success');
 }
}

loadRoutes方法内容如下：

import PageView from '@/layouts/PageView';
function changeRoutes(item) {
  let obj = { ...item };
  obj.component =
    item.routeTypeCode == 0
      ? PageView
      : (resolve) => require([`@/pages${item.component}`], resolve);
  if (item.children) {
    obj['children'] = item.children.map((child) => {
      return changeRoutes(child);
    });
  }
  return obj;
}
function loadRoutes(routesConfig){
  getCurrentMenu().then((arr) => {
  //如果接口没有数据，则可以用下面的模拟数据
  let arr = [
    {
      path: 'default',
      name: '工作台',
      icon: 'dashboard',
      component: '/dashboard/index',
      routeTypeCode: 1,
    },
    {
      path: '/memberManage',
      name: '客户管理',
      icon: 'team',
      component: '/BlankView',
      routeTypeCode: 0,
      children: [
        {
          path: '/company/list',
          name: '企业管理',
          component: '/Member/Company/list',
          routeTypeCode: 1,
        },
        {
          path: '/company/detail',
          name: '企业详情',
          invisible: true,
          routeTypeCode: 1,
          component: '/Member/Company/detail',
        },
        {
          name: '用户管理',
          path: '/member/list',
          routeTypeCode: 1,
          component: '/Member/Member/list',
        },
        {
          name: '用户详情',
          path: '/member/detail',
          routeTypeCode: 1,
          invisible: true,
          component: '/Member/Member/detail',
        },
      ],
    },
    {
      path: '/system',
      name: '系统管理',
      icon: 'setting',
      routeTypeCode: 0,
      component: () => import('@/layouts/PageView'),
      children: [
        {
          name: '角色管理',
          path: '/system/role',
          routeTypeCode: 1,
          component: '/identity/RoleList',
        },
        {
          name: '部门组织',
          path: '/system/organization',
          routeTypeCode: 1,
          component: '/organization/organizationUnits',
        },
        {
          name: '用户管理',
          path: '/system/user',
          routeTypeCode: 1,
          component: '/identity/UserList',
        },
        {
          name: '数据字典',
          path: '/system/dataDictionary',
          routeTypeCode: 1,
          component: '/dataDictionary/DataDictionary',
        },
        {
          name: '客户端管理',
          path: '/system/openApi',
          routeTypeCode: 1,
          component: '/OpenAPI/index',
        },
        {
          name: 'HttpApi日志',
          path: '/system/httpApi',
          routeTypeCode: 1,
          component: '/system/httpApi',
        },
        {
          name: '审计日志',
          path: '/system/auditLog',
          routeTypeCode: 1,
          component: '/system/auditLog',
        },
        {
          name: '缓存列表',
          path: '/system/cache',
          routeTypeCode: 1,
          component: '/system/cache',
        },
      ],
    },
    {
      path: '/menu',
      name: '菜单管理',
      icon: 'menu',
      routeTypeCode: 0,
      redirect: '/menu/list',
      component: '/BlankView.vue',
      children: [
        {
          path: '/menu/list',
          name: '菜单管理',
          routeTypeCode: 1,
          component: '/Menu/menuList.vue',
        },
      ],
    },
  ];
  let list = [];
  arr.forEach((item) => {
    if (item.routeTypeCode != 2) {
      list.push(changeRoutes(item));
    }
  });
  routesConfig = [
    {
      router: 'root',
      children: list,
    },
  ];
  console.log('加载路由了,在此处请求接口获取数据', routesConfig);
  // 应用配置
  const { router, store, i18n } = appOptions;
  // 如果 routesConfig 有值，则更新到本地，否则从本地获取
  if (routesConfig) {
    store.commit('account/setRoutesConfig', routesConfig);
  } else {
    routesConfig = store.getters['account/routesConfig'];
  }
  // 如果开启了异步路由，则加载异步路由配置
  // const asyncRoutes = store.state.setting.asyncRoutes;
  const asyncRoutes = true;
  if (asyncRoutes) {
    if (routesConfig && routesConfig.length > 0) {
      const routes = parseRoutes(routesConfig, routerMap);
      const finalRoutes = mergeRoutes(basicOptions.routes, routes);
      formatRoutes(finalRoutes);
      router.options = { ...router.options, routes: finalRoutes };
      router.matcher = new Router({ ...router.options, routes: [] }).matcher;
      console.log('finalRoutes', finalRoutes);
      router.addRoutes(finalRoutes);
    }
  }
  // 提取路由国际化数据
  mergeI18nFromRoutes(i18n, router.options.routes);
  // 初始化Admin后台菜单数据
  const rootRoute = router.options.routes.find((item) => item.path === '/');
  const menuRoutes = rootRoute && rootRoute.children;
  if (menuRoutes) {
    store.commit('setting/setMenuData', menuRoutes);
  }
  })
}