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路由

安装与插件注入

1// 使用npm或yarn进行安装
2npm i unplugin-router --save-dev
3// 在vite中使用
4import unrouter from 'unplugin-router/vite'
5export default defineConfig({
6  ...,
7  plugins: [
8    unrouter(options)
9  ],
10})
11//在webpack中使用
12module.exports = {
13  plugins:[
14    require('unplugin-router/webpack').default(options)
15  ]
16}

ts类型支持

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

1/// <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

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

PathConfig

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

代码示例

examples目录