@xjmz/vite-plugin-file-route v1.0.0-bate.0

file-route 文件路由

文件路由就是不用手写配置，文件目录结构即路由，通过目录和文件名分析出路由配置。

需要注意的是，满足以下规则才会包含在结果中

• 以 vue,tsx,jsx 类型结尾的文件
• 在上条规则基础上，排除了忽略的目录: 'node_modules','.git','components','component','utils', 'util','styles','images' 和 用户指定要忽略目录

生成路由配置的一些规则

• 目录下存在 _layout.vue|tsx|jsx 会生成嵌套路由； 见：示例 1
• 目录下存在 index.vue|tsx|jsx 会增加一条当前目录默认路由； 见：示例 2
• 目录名或文件名
  • 大写 转成 小写
  • 驼峰 转成 中横线
  • 下划线：以下划线开头的会删除下划线，中间的下划线会转成中横线

注意：保持良好的文件命名风格，对于以下情况未做相关兼容和测试。

• 文件同名扩展名不同; 例如：index.vue、index.tsx
• 文件同名多级扩展名; 例如：index.test.vue、 index.index.vue 等等
• 文件名包含特殊字符、中文字符

示例 1

/*
比如如下目录结构
.
└── pages
    ├── _layout.tsx
    ├── welcome.vue
    └── users
        ├── _layout.jsx
        └── list.vue
*/
/* eslint-disable no-unused-vars */
const routes = [
  {
    path: '/',
    name: 'layout',
    component: () => import('~pages/_layout.tsx'),
    children: [
      {
        path: '/welcome',
        name: 'welcome',
        component: () => import('~pages/welcome.vue')
      },
      {
        path: '/users',
        name: 'user:layout',
        component: () => import('~pages/users/_layout.jsx'),
        children: [
          {
            path: '/list',
            name: 'users:list',
            component: () => import('~pages/users/list.vue')
          }
        ]
      }
    ]
  }
]

示例 2

/*
如下目录结构
.
└── pages
    ├── welcome.vue
    └── users
        └── index.vue
*/
/* eslint-disable no-unused-vars */
const routes = [
  {
    path: '/welcome',
    name: 'welcome',
    component: () => import('~pages/welcome.vue')
  },
  {
    path: '/users',
    name: 'users:__index__',
    redirect: { name: 'users:index' }
  },
  {
    path: '/users/index',
    name: 'users:index',
    component: () => import('~pages/users/index.vue')
  }
]