Arco Design Pro Vue - 动态路由

学习中，之前用的element-admin-vue（下文简称element）
在element里，使用动态路由时候，我的页面地址都是通过后台接口请求回来的。如下图所示：

这里后端同事返回的数据是没有经过处理的，都只有一层。于是在这儿需要进项处理。

export const Layout = () => import('@/layout/default-layout.vue');

const MyRoutermodules = import.meta.glob('/src/views/*/*.vue');

export const getRouters = (
  data: any[],
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  pageCode = 'pageCode',
  parentPage = 'parentPage'
) => {
  window.console.log(MyRoutermodules);
  const routerList: any[] = [];
  const btnList: any[] = []; // methodType 1
  const colList: any[] = []; // methodType 2
  const tabList: any[] = []; // methodType 3
  const map: any = {};
  if (!Array.isArray(data)) {
    return routerList;
  }
  data.forEach((item) => {
    delete item.children;
  });
  data.forEach((item) => {
    map[item.pageCode] = item;
  });
  data.forEach((item) => {
    const parent = map[item[parentPage]];
    if (parent) {
      if (!parent.children) {
        parent.children = [];
      }
      Object.keys(item.pageButtons).forEach((i) => {
        switch (item.pageButtons[i].methodType) {
          case 1:
            btnList.push(item.pageButtons[i]);
            break;
          case 2:
            colList.push(item.pageButtons[i]);
            break;
          case 3:
            tabList.push(item.pageButtons[i]);
            break;
          default:
            break;
        }
      });
      parent.children.push({
        name: item.pageName,
        path: item.pagePath,
        component: () =>
          MyRoutermodules[`/src/views/${parent.pagePath}/${item.pagePath}.vue`],
        meta: {
          hidden: item.isHidden,
          // icon: item.icon,
          requiresAuth: true,
          keepAlive: true,
          order: 100,
          roles: ['*'],
          locale: `menu.${parent.pagePath}.${item.pagePath}`,
        },
      });
    } else {
      item.name = item.pageName;
      item.path = `/${item.pagePath}`;
      item.component = Layout;
      item.meta = {
        hidden: item.isHidden,
        // icon: item.icon,
        icon: 'icon-dashboard',
        order: 99,
        locale: `menu.${item.pagePath}`,
      };
      Object.keys(item.pageButtons).forEach((i) => {
        switch (item.pageButtons[i].methodType) {
          case 1:
            btnList.push(item.pageButtons[i]);
            break;
          case 2:
            colList.push(item.pageButtons[i]);
            break;
          case 3:
            tabList.push(item.pageButtons[i]);
            break;
          default:
            break;
        }
      });
      routerList.push(item);
    }
  });
  return { routerList, btnList, colList, tabList };
};

之前没有写过ts，这里路由他是有写一些参数的规则验证，比如order(排序),locale(中英文)等等，因为是练习，用的以前的接口，。所以有些字段是没有的，就在这儿写死了。routerList 就是路由表，btnList，colList,tabList 是页面中 按钮，table列，tabs块的权限。

在element里，配置了动态路由后添加在路由表里，就可以在页面进项跳转操作。
但在arco里，可能是我还没看懂，配置完了之后，添加到路由表里，菜单栏可以显示出来，但是点击的时候跳转是失败的，报错找不到页面。后来试了试，在路由列表里再去把所有的配置都加上。就可以正常跳转了。

import { DEFAULT_LAYOUT } from '../base';
import { AppRouteRecordRaw } from '../types';

const REPORTMODULE: AppRouteRecordRaw = {
  path: '/reportModules',
  name: 'reportModules',
  component: DEFAULT_LAYOUT,
  meta: {
    locale: 'menu.reportModules',
    requiresAuth: true,
    icon: 'icon-dashboard',
    order: 1,
  },
  children: [
    {
      path: 'ProjectSearch',
      name: 'ProjectSearch',
      component: () => import('@/views/reportModules/ProjectSearch.vue'),
      meta: {
        locale: 'menu.reportModules.ProjectSearch',
        requiresAuth: true,
        roles: ['*'],
      },
    },

    {
      path: 'reportList',
      name: 'reportList',
      component: () => import('@/views/reportModules/reportList.vue'),
      meta: {
        locale: 'menu.reportModules.reportList',
        requiresAuth: true,
        roles: ['*'],
      },
    },
    {
      path: 'Subscribe',
      name: 'Subscribe',
      component: () => import('@/views/reportModules/Subscribe.vue'),
      meta: {
        locale: 'menu.reportModules.Subscribe',
        requiresAuth: true,
        roles: ['*'],
      },
    },
    {
      path: 'SpeTracking',
      name: 'SpeTracking',
      component: () => import('@/views/reportModules/SpeTracking.vue'),
      meta: {
        locale: 'menu.reportModules.SpeTracking',
        requiresAuth: true,
        roles: ['*'],
      },
    },
  ],
};

export default REPORTMODULE;

看了一下路由守卫的配置，好像是用后台接口请求的路由与前端写的路由进行对比，再做的权限判断。

import type { Router, RouteRecordNormalized } from 'vue-router';
import NProgress from 'nprogress'; // progress bar

import usePermission from '@/hooks/permission';
import { useUserStore, useAppStore } from '@/store';
import { appRoutes } from '../routes';
import { WHITE_LIST, NOT_FOUND } from '../constants';

export default function setupPermissionGuard(router: Router) {
  router.beforeEach(async (to, from, next) => {
    const userStore = useUserStore();
    const appStore = useAppStore();
    const Permission = usePermission();
    let permissionsAllow = Permission.accessRouter(to);
    if (appStore.menuFromServer) {
      permissionsAllow = true; // 我写死的。
      // 针对来自服务端的菜单配置进行处理
      // Handle routing configuration from the server

      // 根据需要自行完善来源于服务端的菜单配置的permission逻辑
      // Refine the permission logic from the server's menu configuration as needed
      if (
        !appStore.appAsyncMenus.length &&
        !WHITE_LIST.find((el) => el.name === to.name)
      ) {
        await appStore.fetchServerMenuConfig();
      }
      const serverMenuConfig = [
        ...JSON.parse(JSON.stringify(appStore.appAsyncMenus)),
        ...WHITE_LIST,
      ];
      let exist = false;
      while (serverMenuConfig.length && !exist) {
        const element = serverMenuConfig.shift();
        if (element?.name === to.name) exist = true;
        if (element?.children) {
          serverMenuConfig.push(
            ...(element.children as unknown as RouteRecordNormalized[])
          );
        }
      }
      if (exist && permissionsAllow) {
        next();
      } else next(NOT_FOUND);
    } else {
      // eslint-disable-next-line no-lonely-if
      if (permissionsAllow) next();
      else {
        const destination =
          Permission.findFirstPermissionRoute(appRoutes, userStore.role) ||
          NOT_FOUND;
        next(destination);
      }
    }
    NProgress.done();
  });
}

关于路由的几个页面有：
router
components > menu
hooks > permission