antdesignpro（三）路由和菜单

antdesignpro（三）路由和菜单

⼀、概述

⼆、原⽂摘要

路由和菜单是组织起⼀个应⽤的关键⾻架，我们的脚⼿架提供了⼀些基本的⼯具及模板，帮助你更⽅便的搭建⾃⼰的路由/菜单。

如果你想了解更多关于 和 ，请参看 。

browrHistoryhashHistory

注意：我们的脚⼿架依赖 ，路由⽅⾯是基于 的实现，在写法以及 API 上与之前的版本有较⼤不同，所以，在

dva@2react-router@4

开始前你需要具备⼀些相关的基础知识。这⾥给出⼏篇关键⽂档：

2.1、基本结构

脚⼿架通过结合⼀些配置⽂件、基本算法及⼯具函数，搭建好了路由和菜单的基本框架，主要涉及以下⼏个模块/功能：

路由⽣成

结合路由信息的配置⽂件和预设的基本算法，提供了在不同层级⽂件中⾃动⽣成路由列表的能⼒。

菜单⽣成

由确定数据结构的菜单配置⽂件⽣成，其中的菜单项名称，嵌套路径与路由有⼀定关联关系。

⾯包屑

组件 中内置的⾯包屑也可由脚⼿架提供的配置信息⾃动⽣成。

简单介绍下各个模块的基本思路。

2.1.1、路由

⽬前在脚⼿架中，除助理医师资格证报考条件 了，其余路由列表都是⾃动⽣成，其中最关键的就是中⼼化配置⽂件 ，它的主要作⽤有两个：

src/common/

配置路由相关信息。如果只考虑⽣成路由，你只需要指定每条配置的路径及对应渲染组件。

输出路由数据，并将路由数据（routerData）挂载到每条路由对应的组件上。

这样我们得到⼀个基本的路由信息对象，它的结构⼤致是这样：

{

'/dashboard/analysis': {

component: DynamicComponent(),

name: '分析页',

},

'/dashboard/monitor': {

component: DynamicComponent(),

name: '监控页',

},

'/dashboard/workplace': {

component: DynamicComponent(),

name: '⼯作台',

},

}

为了帮助⾃动⽣成路由，在 中提供了⼯具函数 getRoutes，它接收两个参数：当前路由的 路径及路由信息 routerData，主要完

src/utils/

成两个⼯作：

筛选路由信息，筛选的算法为只保留当前 下最邻近的路由层级（更深⼊的层级留到嵌套路由中⾃⾏渲染），举个例⼦(每条

为⼀个 route path)：

// 当前 为 /

/a // 没有更近的层级，保留

/a/b // 存在更近层级 /a，去掉

/c/d // 没有更近的层级，保留

/c/e // 没有更近的层级，保留

/c/e/f // 存在更近层级 /c/e，去掉

⾃动分析路由 参数，除了下⾯还有嵌套路由的路径，其余路径默认设为 exact。

经过 getRoutes 处理之后的路由数据就可直接⽤于⽣成路由列叶子手工 表：

// src/layouts/

getRoutes(, routerData).map(item => (

key={}

path={}

component={ent}

exact={}

/>

))

注意：如果你不需要⾃动⽣成路由，也可以⽤ routerData ⾃⾏处理。

2.1.2、菜单

菜单信息配置在 中，它的作⽤是：

src/common/

配置菜单相关数据，菜单项的跳转链接为配置项及其所有⽗级配置 path 参数的拼接。

为 提供路由名称（name）等数据，根据拼接好的跳转链接来匹配相关路由。

src/common/

如果你的项⽬并不需要菜单，你也可以直接在 中配置 name 信息。

src/common/

配置⽂件输出的菜单数据，可以直接提供给侧边栏组件使⽤。。除了⽣成菜单，菜单数据还可辅助⽣成重定向路由等模块，参考 。

2.1.3、⾯包屑

之前提到的路由信息 routerData 可以直接传递给 PageHeader 组件⽤以⽣成⾯包屑，你可以⽤ props 或者 context 的⽅式进⾏传递。脚

⼿架⾥的。

2.2、需求⽰例

2.2.1、新增页⾯

脚⼿架默认提供了两种布局模板： 以及

基础布局 - BasicLayout账户相关布局 - UrLayout，如上⽂提供的两种图⽚。

如果你的页⾯可以利⽤这两种布局，那么只需要在路由及菜单配置中增加⼀条即可：

1》增加路由配置

// src/common/

'/dashboard/test': {

component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/Test')),

},

2》菜单配置

// src/common/

const menuData = [{

name: 'dashboard',

icon: 'dashboard', // / or

path: 'dashboard',

children: [{

name: '分析页',

path: 'analysis',

}, {

name: '监控页',

path:杨桃的功效与作用吃法 'monitor',

}, {

name: '⼯作台',

path: 'workplace',

}, {

name: '测试页',

path: 'test',

}],

}, {

// 更多配置

}];

加好后，会默认⽣成相关的路由及导航。

2.2.2、新增布局模板

如果提供的布局不能满⾜你的要求，就需要⾃⼰新建 Layout 模板了。假设有两个新的页⾯需要使⽤新模板，你需要先配置好路由及菜

单：

1》路由设置

// src/common/

'/new': {

component: dynamicWrapper(app, ['monitor'], () => import('../layouts/NewLayout')),

},

'/new/page1': {

component: dynamicWrapper(app, ['monitor'], () => import('../routes/New/Page1')),

},

'/new/page2': {

component: dynamicWrapper(app, ['monitor'], () => import('../routes/New/Page2')),

},

2》菜单设置

// src/common/

const menuData = [{

name: '新布局',

icon: 'table',

path: 'new',

children: [{

name: '页⾯⼀',

path: 'page1',

}, {

name: '页⾯⼆',

path: 'page2',

}],

}, {

// 更多配置

}];

在根路由中增加这组新模板：

// src/

} />

} />

} />

然后在你的新模板中，仿照 或 ⽣成路由列表即可。

src/layouts/src/layouts/

2.3、带参数的路由/菜单

脚⼿架默认⽀持带参数的路由、菜单及⾯包屑配置，直接在路由的 key 以及菜单中的 path 配置即可：

1》路由

// src/common/

'/dashboard/:workplace': {

component: dynamicWrapper(app, ['chart'], () => import('../routes/Dashboard/Workplace')),

},

'/:list/table-list': {

component: dynamicWrapper(app, ['rule'], () => import('../routes/List/TableList')),

},

2》菜单

// src/common/

const menuData = [{

name: 'dashboard',

icon: 'dashboard',

path: 'dashboard',

children: [{

name: '分析页',

path: 'analysis',

}, {

name: '监控页',

path: 'monitor',

}, {

name: '⼯作台',

path: ':workplace',

}],

}, {

name: '列表页',

icon: 'table',

path: ':list',

children: [],

}, {

// 更多配置

}];

2.4、嵌套布局

有时在当前 layout 下还需要嵌套其他布局，例如有⼏个页⾯都需要展⽰同⼀个模块，你可以把这部分提炼出来变成⼀个新的布局，再到

该布局下⽣成路由列表。与 的区别，只是不需要将它增加到根路由中。具体可以参照 /list/arch 相关配置，及相关组件

src/common/

⽂件。

2.5、嵌套路由同级展⽰

脚⼿架默认使⽤⼯具函数 getRoutes 对 routerData 进⾏处理，然后⽣成路由列表，根据，在每雾霾的英文 ⼀级组件中只会渲染当前 下

最邻近的路由，所以，如果你要实现嵌套路由的同级展⽰（如：将 和 在同⼀个地⽅渲染），就需要⼿动获取该路

/list/arch/list/arch/projects

由的数据并添加在合适的地⽅。

{/* src/layouts/ 类⽐你的上层 layout 组件 */}

同时在嵌套 layout 的⽂件中去掉这⼀条路由（如果还有下层路由需要 render）。

{/* src/routes/List/ 类⽐你的嵌套 layout 组件 */}

{

getRoutes(, routerData).filter(item => !== '/list/arch/projects').map(item =>

(

key={}

path={}

component={ent}

exact={}

/>

)

)

}

2.6、隐藏菜单

如果需要隐藏某条菜单项，可以在该条数据中增加 hideInMenu 参数。

hideInMenu: true, // 隐藏该条，或隐藏该组

2.7、隐藏⾯包屑

如需隐藏⾯包屑中的某个层级，可以增加 hideInBreadcrumb 属性。

// src/common/

'/dashboard/ana配合 lysis': {

component: dynamicWrapper(app, ['chart'], () => import('../routes/Dashboard/Analysis')),

hideInBreadcrumb: true, // 隐藏该条

},

'/dashboard/monitor': {

component: dynamicWrapper(app, ['monitor'], () => import('../routes/Dashboard/Monitor')),

},

2.8、关于 dynamicWrapper

import dynamic from 'dva/dynamic';

// wrapper of dynamic

const dynamicWrapper = (app, models, component) => dynamic({

app,

// eslint-disable-next-line no-underscore-dangle

models: () => (m => !app._(({ namespace }) => namespace === m)).map(m => import(`../models/${m}.js`)),

// add routerData prop

component: () => {

con关于坚持的文章 st routerData = getRouterData(app);

return component().then((raw) => {

const Component = t || raw;

return props => ;

});

},

});import dynamic from 'dva/dynamic';

// wrapper of dynamic

const dynamicWrapper = (app, models, component) => dynamic({

app,

// eslint-disable-next-line no-underscore-dangle

models: () => (m => !app._(({ namespace }) => namespace === m)).map(m => import(`../models/${m}.js`)),

// add routerData prop

component: () => {

const routerData = getRouterData(app);

return component().then((raw) => {

const Component = t || raw;

return props => ;

});

},

});

为了代码的简洁性，我们对 进⾏了⼆次封装，需要注意的是这⾥使⽤了 的动态 ， 的 ⽅法已经帮我们封装好

dva/dynamicimportdvadynamic

了 动态加载的相关事宜，所以我们只需要直接使⽤即可。

Promi