动态生成路由

vue3+vite3根据目录动态生成路由

页面层级

├── App.vue
├── main.ts
├── router
│   ├── index.ts
│   └── pTest.ts
├── store
│   └──test.store.ts
├── utils
│   ├── index.ts
│   ├── ...
│   └── interceptor.ts
└── views
    ├── pTest
    │   ├── components
    │   ├── test
    │   │   └── testA.vue
    │   ├── testA.vue
    │   └── testB.vue
    └── pageQuickIn.vue

routerGenerate

• 约定如下:
• 例：页面如下 views/pTest/testA
  • 1: path => pTest/testA
  • 2: name => PTestTestA
  • 3: meta => pagesOptions中配置

import { RouteRecordRaw } from 'vue-router';

/**
 * 动态生成路由
 * @param viteModules https://cn.vitejs.dev/guide/features#glob-import
 */
export function routerGenerate(viteModules: Record<string, () => Promise<any>>, pagesOptions: any = {}): Array<RouteRecordRaw> {
  // 过滤掉components下的vue文件
  const _viteModules = Object.keys(viteModules)
    .filter((key) => !key.includes('components'))
    .reduce((acc, key) => {
      acc[key] = viteModules[key];
      return acc;
    }, {} as typeof viteModules);

  const routes: Array<RouteRecordRaw> = Object.entries(_viteModules).map(([modulePath, component]) => {
    // path 页面路由 目录路径 如：/pTest/testA
    const path = modulePath.replace('../views', '').replace('.vue', '') || '/';
    // 目录层级拆分 ['',pTest,testA],['',pTest,test,testA],
    const pathArr = path.split('/');
    const pathArrLen = pathArr.length;
    // 模块文件目录层级-数组形式 [pTest,testA],[pTest,test,testA]
    const nameArr = pathArr.slice(1, pathArrLen);
    // console.log(nameArr);
    const name = nameArr
      .map((_e) => {
        return _e.replace(/^[a-z]/, (match) => match.toUpperCase());
      })
      .join(''); // 页面name 路径拼接-驼峰 PTestTestA PTestTestTestA
    // 当前页面配置 routeNameArr.join('/')页面所在分包path 用于匹配页面配置
    const currentPageOptions = pagesOptions[pathArr.slice(2, pathArrLen).join('/')];
    // console.log(currentPageOptions);
    return {
      path: path + (currentPageOptions?.routeParam || ''),
      meta: currentPageOptions?.meta || {},
      name,
      component,
    };
  });
  // console.log(routes);
  return routes;
}

pTest.router

import { RouteRecordRaw } from 'vue-router';
import { routerGenerate } from '@/common/utils';

// pagesOptions
const pTestPagesOptions = {
  // testA: {
  //   meta: {
  //     title: '测试页面A',
  //     KeepAlive: true,
  //   },
  // },
  // 'test/testA': {
  //   meta: {
  //     title: '测试页面A',
  //     KeepAlive: true,
  //   },
  //   routeParam: '/:id',
  // },
};
const routes: Array<RouteRecordRaw> = routerGenerate(import.meta.glob('../views/pTest/**/*.vue'), pTestPagesOptions);
export default routes;

createRouter

import { createRouter, RouteRecordRaw, createWebHashHistory } from 'vue-router';
import pTest from './pTest';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'pageQuickIn',
    meta: {
      title: '',
      keepAlive: false,
    },
    component: () => import('../views/pageQuickIn.vue'),
    // redirect: '/pTest/testA',
    children: [],
  },
  ...pTest,
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;