Ant Design学习(七)
3.2.2、菜单和路由
默认的菜单是不能直接投入到项目开发的，所以，我们需要搞清楚如何自定义菜单和路由。
在pro中，菜单和路由，在router.config.js配置文件中进行管理：
打开router.config.js后，可以看出，pro提供了有2套路由（布局），分别是/user和/
/user的布局：
接下来，我们先重点关注，/路由：
routes: [
// dashboard
{ path: '/', redirect: '/dashboard/analysis' },
{
path: '/dashboard',
name: 'dashboard',
icon: 'dashboard',
routes: [
{
path: '/dashboard/analysis', //请求路径
name: 'analysis',
component: './Dashboard/Analysis', //组件位置
},
{
path: '/dashboard/monitor',
name: 'monitor',
component: './Dashboard/Monitor',
},
{
path: '/dashboard/workplace',
name: 'workplace',
component: './Dashboard/Workplace',
},
],
},所以，可以得出结论，菜单是有路由的配置生成的。
接下来进行实验，新增一个路由：
// new
{
path: '/new',
name: 'new',
icon: 'user',
routes: [
{
path: '/new/analysis',
name: 'analysis',
component: './Dashboard/Analysis',
},
{
path: '/new/monitor',
name: 'monitor',
component: './Dashboard/Monitor',
},
{
path: '/new/workplace',
name: 'workplace',
component: './Dashboard/Workplace',
},
],
},测试：
可以看出，新的菜单以及添加到页面中，只是显示的文字不对。那么文字在哪里配置呢？
其实，文字是在国际化文件中进行配置的：
新增配置如下：
'menu.new': 'New Dashboard',
'menu.new.analysis': 'New 分析页',
'menu.new.monitor': 'New 监控页',
'menu.new.workplace': 'New 工作台',进行测试：
发现，已经正常显示了。
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2023-01-01，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读