umi

约定式路由

 路由匹配

• 工程中的pages文件夹中存放的是页面。如果工程包含src目录，则src/pages是页面文件夹。
• 页面的文件名，以及页面的文件路径，是该页面匹配的路由
• 如果页面的文件名是index，则可以省略文件名（首页）(注意避免文件名和当前目录中的文件夹名称相同)
• 如果src/layout目录存在，则该目录中的index.js表示的是全局的通用布局，布局中的children则会添加具体的页面。
• 如果pages文件夹中包含_layout.js，则layout.js所在的目录以及其所有的子目录中的页面，共用该布局。
• 404约定，umi约定，pages/404.js，表示404页面，如果路由无匹配，则会渲染该页面。该约定在开发模式中无效，只有部署后生效。 - 

- 使用$名称，会产生动态路由 - 

 路由跳转

- 跳转链接： 导入umi/link，umi/navlink - 代码跳转： 导入umi/router

 导入模块时，@表示src目录  

 路由信息的获取

所有的页面、布局组件，都会通过属性，收到下面的属性

• match：等同于react-router的match
• history：等同于react-router的history（history.location.query被封装成了一个对象，使用的是query-string库进行的封装）
• location：等同于react-router的location（location.query被封装成了一个对象，使用的是query-string库进行的封装）
• route：对应的是路由配置 如果需要在普通组件中获取路由信息，则需要使用withRouter封装，可以通过umi/withRouter导入

配置式路由

当使用了路由配置后，约定式路由全部失效。 两种方式书写umi配置：

1. 使用根目录下的文件.umirc.js
2. 使用根目录下的文件config/config.js 进行路由配置时，每个配置就是一个匹配规则，并且，每个配置是一个对象，对象中的某些属性，会直接形成Route组件的属性 注意：

• component配置项，需要填写页面组件的路径，路径相对于pages文件夹
• 如果配置项没有exact，则会自动添加exact为true
• 每一个路由配置，可以添加任何属性
• Routes属性是一个数组，数组的每一项是一个组件路径，路径相对于项目根目录，当匹配到路由后，会转而渲染该属性指定的组件，并会将component组件作为children放到匹配的组件中 路由配置中的信息，同样可以放到约定式路由中，方式是，为约定式路由添加第一个文档注释（注释的格式的YAML），需要将注释放到最开始的位置

YAML格式

- 键值对，冒号后需要加上空格 - 如果某个属性有多个键或多个值，需要进行缩进（空格）

• YAML

使用dva

文档： umijs.org/zh/plugin/u…

dva在umi中将模型分为两种：

1. 全局模型：所有页面通用，工程一开始启动后，模型就会挂载到仓库
2. 局部模型：只能被某些页面使用，访问具体的页面时才会挂载到仓库

umi里的dva里的写法和dva里的相同，具体可查看官网文档

开启插件

依然是在.umirc.js里操作

全局模型

在src/models目录下定义的js文件都会被看作是全局模型，默认情况下，模型的命名空间和文件名一致。

局部模型

特点局部模型定义在pages文件夹或其子文件夹中，在哪个文件夹定义的模型，会被该文件夹中的所有页面以及子页面、以及该文件夹的祖先文件夹中的页面所共享。也就是说，凡是这个页面的直链（父子爷孙）都可共享。

局部模型的定义和全局模型的约定类似，需要创建一个models文件夹

代理（proxy）

代理用于解决跨域问题

配置.umirc.js中的proxy

数据模拟（mock）

用于解决前后端协同开发的问题 数据模拟可以让前端开发者在开发时，无视后端接口是否真正完成，因为使用的是模拟的数据

umijs约定：

1. mock文件夹中的文件
2. src/pages文件夹中的_mock.js文件 以上两种JS文件，均会被umijs读取，并作为数据模拟的配置 可以自行发挥，添加模拟数据，通常，我们会和mockjs配合。

具体mock语法详见文档（**github.com/nuysoft/Moc…

 额外的约定文件

• src/pages/document.ejs: 页面模板文件
• src/global.js：在umi最开始启动时运行的js文件
• src/app.js：作运行时配置的代码
  1. patchRoutes: 函数，该函数会在umi读取完所有静态路由配置后执行    2. dva      config： 相当于new dva(配置)      plugins： 相当于dva.use(插件)
• .env: 配置环境变量，这些变量会在umi编译期间发挥作用
  1. UMI_ENV：umi的环境变量值，可以是任意值，该值会影响到.umirc.js
  2. PORT
  3. MOCK   

umirc配置

书写在.umirc.js文件中的配置

• plugins：配置umijs的插件
• routes：配置路由（会导致约定式路由失效）
• history：history对象模式（默认是browser）
• outputPath：使用umi build后，打包的目录名称，默认./dist
• base: 相当于之前BrowserRouter中的basename
• publicPath: 指定静态资源所在的目录
• exportStatic: 开启该配置后，会打包成多个静态页面，每个页面对应一个路由，开启多静态页面应用的前提条件是：没有动态路由