unplugin-router

unplugin-router是以项目文件或目录进行分析后自动生成路由配置的约定式路由方案，支持热更新，支持在vite和webpack中使用

迭代计划

• 支持vite和webpack（v1.x 已支持）
• 支持生成vue-router3.x和vue-router4.x（v1.x 已支持）
• 支持生成react-router5.x、react-router6.x （v2.x 暂未支持）

vue | react

特点功能

• 支持动态路由
• 支持嵌套路由
• 支持404路由
• 支持权限路由
• 支持prompt路由

安装与插件注入

// 使用npm或yarn进行安装
npm i unplugin-router --save-dev
// 在vite中使用
import unrouter from 'unplugin-router/vite'
export default defineConfig({
  ...,
  plugins: [
    unrouter(options)
  ],
})
//在webpack中使用
module.exports = {
  plugins:[
    require('unplugin-router/webpack').default(options)
  ]
}

ts类型支持

在typescript项目中，可以通过引入client.ts文件对route、register进行类型扩展
在目录下新建.d.ts文件

/// <reference types="unplugin-router/client" />

参数配置（options）

| 属性名 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | platform | 指定生成的路由类型 | string | vue/react | vue | | mode | 指定要使用的路由模式 | string | hash/history | hash | | jumpTo | 当修改路由文件后是否自动跳转到该路由页面 | boolean | - | true | | entry | 指定unplugin-router的扫描入口 | string | - | src/pages | | exclude | 指定哪些文件或目录下的文件不应该被作为路由生成 | {dir:string[];file:string[]} | - | 见下 | | noAuthRedirect | 指定无页面权限时导航的路由 | string | - | / | | notInAuthsBehaviour | 指定无权限时的处理方式，默认视为有权限 | boolean | - | true | | name | 指定路由名称的生成规则 | NameConfig | - | 默认取path值并合并为首字母大写的驼峰式 | | path | 设置path的生成规则 | PathConfig | - | 默认path.prefix为false | | print | 是否输出路径到name、path的映射，建议非ts项目启用 | boolean | - | false | | console | 是否打印日志信息，默认开发环境打印 | boolean | - | true |

默认被跳过的文件

• 以 . 或 _ 开头的文件或目录
• component 、 components 、 utils 、 util 、 helper 、 helpers目录
• 非.vue文件（vue）
• 非.tsx或.jsx（react）

NameConfig

interface NameConfig{
  /**
   * 默认为true
   * 表示仅在开发环境下生成name属性
   * 页面内注解的name不受此配置影响
   */
  onlyDev?:boolean;
  /**
   * 默认为false
   * 设置true后，当出现重复的路由名称时，会以当前路由name+'_'+数值进行替换
   */
  repair?:boolean;
  // 在路由名称生成后被回调，可return一个自定义的name值进行替换
  created?:(route:RouteItem)=>string;
}

PathConfig

interface PathConfig{
  /**
   * 指定根路由（如index），匹配到时，path会被设置为''
   * 仅作用于子路由
   * 默认子路由与父路由名称一致时，设置path为''
   */
  rootNamed?:string;
}

代码示例

examples目录