/elegant-router

A plugin to create router elegantly, support Vue, React, Solid and Svelte

Primary LanguageTypeScript

elegant-router 优雅的路由

中文 | English

介绍

ElegantRouter 是一个基于文件系统创建路由的工具， 能够直接自动生成路由的定义，路由文件的导入以及路由相关的类型定义，只需要按照约定的规则创建路由文件即可，不需要在路由文件中写入任何额外的配置。

异同点

ElegantRouter 与其他基于文件系统的路由工具的异同点如下：

  1. 其他基于文件系统的路由工具约定配置繁多，路由数据为黑盒，自定义难度大
  2. ElegantRouter 仍然遵循的是api-first的原则，只是把配置路由的过程尽可能的简化

传统的路由配置过程

这里拿配置Vue路由的过程为例，要创建一个页面路由需要经历以下的步骤：

  1. 导入布局组件
  2. 导入页面组件
  3. 在路由配置文件中定义路由

缺点:

  • 上述的步骤虽然看起来不算复杂，但是在实际的开发过程中，这些步骤都是重复的，而且每次都需要手动完成。
  • 路由名称和路径的维护是非常麻烦
  • 对布局和页面组件的路由定义没有明确的约定，导致路由定义的混乱

ElegantRouter 原理

路由页面文件的配置规则

  1. 首先配置里面定义了 pageDir 属性，用于指定页面文件的目录
  2. 其次，页面文件的默认是

安装

使用

注意事项