file-router

The file system is the route.

Usage

The directory strucutre

├── views
│   ├── _layout.vue
│   ├── a.vue
│   ├── aa.jsx
│   ├── aaa.tsx
│   └── home
│       ├── _layout.vue
│       ├── a.vue
│       ├── aa.jsx
│       └── aaa.tsx

Code

/* opts
{
  viewsDir?: string;    // 视图文件目录，默认值 src/views
  ignoreDir?: string[]; // 忽略目录，默认值 ['components','component','utils','styles','images',]
  viewFileReg?: RegExp;      // 视图文件正则 默认值:/\.(vue|jsx|tsx)$/i
  cwd?: string;
  viewsDirAlias?: string; // 视图文件目录别名
  depth?: number; // 递归最大目录层级 默认值：6
}

*/

const FileRouter = require('@m.wang/file-router')

const fileRouter = new FileRouter({
  cwd: process.cwd(),
  viewsDir: join('src', 'views'),
  viewsDirAlias: '~views',
})
const result = fileRouter.getRoutes()

Output

export default [
  {
    name: 'layout',
    path: '/',
    component: () => import('~views/_layout.vue'),
    children: [
      {
        name: 'a',
        path: 'a',
        component: () => import('~views/a.vue'),
      },
      {
        name: 'aa',
        path: 'aa',
        component: () => import('~views/aa.jsx'),
      },
      {
        name: 'aaa',
        path: 'aaa',
        component: () => import('~views/aaa.tsx'),
      },
      {
        name: 'home:layout',
        path: 'home',
        component: () => import('~views/home/_layout.vue'),
        children: [
          {
            name: 'home:a',
            path: 'a',
            component: () => import('~views/home/a.vue'),
          },
          {
            name: 'home:aa',
            path: 'aa',
            component: () => import('~views/home/aa.jsx'),
          },
          {
            name: 'home:aaa',
            path: 'aaa',
            component: () => import('~views/home/aaa.tsx'),
          },
        ],
      },
    ],
  },
]