Umi.js-配置式路由(学习笔记)

配置式路由

当使用了路由配置后，约定式路由全部失效。

两种方式书写umi配置：

1. 使用根目录下的文件.umirc.js
2. 使用根目录下的文件config/config.js

进行路由配置时，每个配置就是一个匹配规则，并且，每个配置是一个对象，对象中的某些属性，会直接形成Route组件的属性

注意：

• component配置项，需要填写页面组件的路径，路径相对于pages文件夹
• 如果配置项没有exact，则会自动添加exact为true
• 每一个路由配置，可以添加任何属性
• Routes属性是一个数组，数组的每一项是一个组件路径，路径相对于项目根目录，当匹配到路由后，会转而渲染该属性指定的组件，并会将component组件作为children放到匹配的组件中

路由配置中的信息，同样可以放到约定式路由中，方式是，为约定式路由添加第一个文档注释（注释的格式的YAML），需要将注释放到最开始的位置

YAML格式

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

export default {
    routes: [
        {
            path: "/",
            component: "../layouts/index.js",
            exact: false,
            routes: [
                {
                    path: "/", component: "./index", title: "首页",
                    Routes: ["./src/routes/HandleTitle.js"]
                },
                {
                    path: "/login", component: "./login", title: "登录页",
                    Routes: ["./src/routes/HandleTitle.js"]
                },
                {
                    path: "/welcome", component: "./welcome", title: "欢迎页",
                    Routes: ["./src/routes/PrivateRouter.js", "./src/routes/HandleTitle.js"]
                }
            ]
        }
    ]
}