實(shí)現(xiàn)的需求：

在頁(yè)面開(kāi)始登錄時(shí)，通過(guò)路由接口可以獲取到所有有權(quán)限的菜單數(shù)據(jù)。

然后通過(guò)loadRoutes方法來(lái)實(shí)現(xiàn)異步動(dòng)態(tài)路由。

效果圖——?jiǎng)討B(tài)菜單的參數(shù)效果圖如下：

在account.js中的refreshPermissions函數(shù)中添加以下代碼

如上圖所示，需要在登錄接口調(diào)用成功后，書(shū)寫以下的代碼：
import { loadRoutes } from '@/utils/routerUtil.js';
import { getCodeList } from '@/services/menu';//獲取權(quán)限的接口，我這邊是獲取權(quán)限成功后，再去獲取動(dòng)態(tài)菜單，其實(shí)這個(gè)邏輯是可以異步處理的。

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方法內(nèi)容如下：

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) => {
  //如果接口沒(méi)有數(shù)據(jù)，則可以用下面的模擬數(shù)據(jù)
  let arr = [
    {
      path: 'default',
      name: '工作臺(tái)',
      icon: 'dashboard',
      component: '/dashboard/index',
      routeTypeCode: 1,
    },
    {
      path: '/memberManage',
      name: '客戶管理',
      icon: 'team',
      component: '/BlankView',
      routeTypeCode: 0,
      children: [
        {
          path: '/company/list',
          name: '企業(yè)管理',
          component: '/Member/Company/list',
          routeTypeCode: 1,
        },
        {
          path: '/company/detail',
          name: '企業(yè)詳情',
          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: '系統(tǒng)管理',
      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: '數(shù)據(jù)字典',
          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: '審計(jì)日志',
          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('加載路由了,在此處請(qǐng)求接口獲取數(shù)據(jù)', routesConfig);
  // 應(yīng)用配置
  const { router, store, i18n } = appOptions;
  // 如果 routesConfig 有值，則更新到本地，否則從本地獲取
  if (routesConfig) {
    store.commit('account/setRoutesConfig', routesConfig);
  } else {
    routesConfig = store.getters['account/routesConfig'];
  }
  // 如果開(kāi)啟了異步路由，則加載異步路由配置
  // 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);
    }
  }
  // 提取路由國(guó)際化數(shù)據(jù)
  mergeI18nFromRoutes(i18n, router.options.routes);
  // 初始化Admin后臺(tái)菜單數(shù)據(jù)
  const rootRoute = router.options.routes.find((item) => item.path === '/');
  const menuRoutes = rootRoute && rootRoute.children;
  if (menuRoutes) {
    store.commit('setting/setMenuData', menuRoutes);
  }
  })
}

上面最重要的文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-713209.html

到了這里，關(guān)于vue2+antd——實(shí)現(xiàn)動(dòng)態(tài)菜單路由功能——基礎(chǔ)積累的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！