umi 导航菜单的空白页问题

主思路

routes里的上级菜单必须设定path，否则下一个二级菜单会出现空白页。

详情

umi的导航菜单是在 config/routes.ts 里设定的，比如：

export default [{name: 'home',path: '/home',component: './Home',},{name: 'test1',routes: [{path: '/test1/subtest1',name: 'subtest1',component: './subtest1',},],},{name: 'test2',routes: [{path: '/test2/subtest2',name: 'subtest2',component: './subtest2',},],},
];

显示很正常，但点击 subtest2 的时候会有问题，显示一个空白页，但并没有其他错误。经过替换法，发现父菜单没有 path 导致的这个问题。

正确的routes.ts是这样的

export default [{name: 'home',path: '/home',component: './Home',},{name: 'test1',path: '/test1',routes: [{path: '/test1/subtest1',name: 'subtest1',component: './subtest1',},],},{name: 'test2',path: '/test2',routes: [{path: '/test2/subtest2',name: 'subtest2',component: './subtest2',},],},
];

总结

原始的替换法在比较极端的情况下还是有用的，umi还是有一些隐藏的坑，如果遇到类似的问题可以从antd pro生成一个标准的project，然后用替换法来检查哪里有问题。文档可能没这么全，甚至log也未必会有。

参考

umi 路由路由

antd pro 新增页面 - Ant Design Pro

菜单的高级用法 - Ant Design Pro

umi 导航菜单的空白页问题相关推荐

带图标和按钮切换特效的垂直导航菜单的html页面源码
大家好,今天给大家介绍一款,带图标的垂直导航菜单的html页面源码(图1).送给大家哦,获取方式在本文末尾. 图1 点击每个按钮时,都有切换特效,并显示按钮的说明,看起来非常不错(图2) 图2 代码完 ...
Word怎么删除空白页？分享5个基础方法！
案例:Word怎么删除空白页 [我最近在用word写文章,但经常都会遇到的一个问题就是总是会有空白页,使用word时怎么删除空白页呢?请大家给我支支招吧!] 在使用Microsoft Word编辑文档 ...
JQuery一行搞定当前面所对应的导航菜单变亮效果
前提:所有页面用的是一个母板页,并且导航菜单放在母板页 HTML代码如下: <div class="mainnav"> <ul class="banne ...
vue3.0+ts+element-plus多页签应用模板：侧边导航菜单（上）
目录系列文章一.先说点什么二.从问题开始,侧边栏是干啥的? 三.封装组件之思路分析四.封装菜单部分 1. MenuItem 2. ModuleMenu 系列文章 vue3.0+ts+eleme ...
App 金刚区导航菜单，类似淘宝、QQ 音乐等 APP 导航，方格布局横向滑动翻页带滚动条
TransformersLayout 项目地址:zaaach/TransformersLayout 简介: :fire: App 金刚区导航菜单,类似淘宝.QQ 音乐等 APP 导航,方格布局横向滑 ...
NavMenu 导航菜单与 el-tabs 标签页关联
直接上代码: vue模版 //导航就不用看吧.下面就是标签栏 <el-main><el-tabs v-model="editableTa ...
为SharePoint网站创建自定义导航菜单
相信不少人都希望把SharePoint网站内置的那个顶部导航菜单,换成自己希望的样式.由于SharePoint 2007/2010的网站导航基本上基于标准的ASP.NET SiteMap模型,所以只要 ...
PDF如何插入空白页？3 次点击在PDF中插入空白页！
由于工作和学习的需要,您可能需要在现有的PDF文件中插入一张空白页或几页PDF,使之成为一个完整的PDF文件.但是,PDF文件实际上是最终作品,似乎不可能向其添加额外的页面.事实上,将空白页或 PDF ...
WPS表格打印的时候有非常多的空白页应该怎么办？
老古偶尔在接收同事发来的表格数据文件打开预览发现有非常多的空白页,但是实际内容只有几页,如果直接这样打印不单单是页码错误,而且会浪费很多纸张,毕竟绝大多数都是空白页.比如这份文件实际内容只有 11 页 ...
十种不同风格的网站导航菜单
这些导航菜单来自于Dribbble网站,出自于世界各地的优秀设计师之手,涵盖了各种不同的风格,个个都非常精美.这里我将这些导航菜单展示出来,依据自己的想法总结它们的可取之处,演示其中一些用得上的技术方 ...

umi 导航菜单的空白页问题

主思路

详情

总结

参考

umi 导航菜单的空白页问题相关推荐

最新文章

热门文章