RuoYi-vue3.0点击菜单或tab出现空白页面 无报错或点击新添加的动态路由出现其他tab空白，需要重新刷新下页面才能显示出页面

已于 2025-04-27 17:54:39 修改
阅读量626 收藏 2
点赞数 5
CC 4.0 BY-SA版权
文章标签： ruoyi vue3.0
于 2025-04-27 17:00:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m_7_m/article/details/147564041

前端使用若依框架(vue3版本)，在开发过程中有时会出现切换菜单或者tab，页面空白的情况，刷新页面后又恢复正常

解决方案1：删除页面中template下的注释 ，一般这种情况是template包含多个根元素导致
注意一级节点也包含注释 ，可以放其他位置或把注释去掉即可。

解决方案2：删除AppMain中的transition解决

解决方案3：在AppMain中的keep-alive外包裹上div(推荐)

m_7_m
关注
解决：RuoYi点击菜单出现空白页面，无报错
zh94264的博客
01-24 4265
前端使用若依框架(vue3版本)，在开发过程中有时会出现切换菜单或者tab，页面空白的情况，刷新页面后又恢复正常。出现这种情况一般是在页面停留了几分钟再操作或者短时间多次跳转，偶尔也会莫名奇妙的出现，但就因为同时使用了transition和keep-alive，并在组件内又使用了transition导致的(原理还不了解，可能是缓存了动画的原因，知道的大佬可以解答下)网上看到部分开发者也遇到过这个问题，应该是框架本身的bug，找寻之后发现在。目前本人只了解到以上两种解决方案。
ruoyi-admin和ruoyi-vue3笔记-gl-wms物流管理项目
TY121810的博客
07-24 1221
gl-wms物流管理项目。
ruoyi+vue-router动态路由刷新后页面消失的解决办法
weixin_65465925的博客
07-25 1289
解决vue+ruoyi动态路由页面刷新页面空白问题，亲测有用
Vue3 若依二开项目—出现url跳转，但是页面显示空白的情况，重新刷新才能显示页面
huhuhu667的博客
06-11 184
在我用若依进行二开的时候，发生了一个这样的问题，在页面跳转时出现url跳转，但是页面显示空白的情况，这时必须重新刷新才能显示页面。直接在AppMain.vue中将transition标签去除，同样可以起到相同作用。在AppMain.vue中在transition标签的内容下再用一个div进行包裹。
Vue3使用keepLive实现切换页面，但出现空页面现象
m0_59538127的博客
03-07 380
在加了个key属性，然后在script里面加了这几个事件，就可以了。第二种就是router-view就作为根标签，在外面加个div包住就可以。但是这两种情况我都不满足，还是出现空页面现象。
记录：Ruoyi在菜单管理中配置菜单出现空白页面，控制台无报错
weixin_53196143的博客
09-26 644
网上查阅了资料，有些开发者也会遇到这个问题，我猜应该是他框架本身的问题。解决办法也是参考网上的。反复查看配置的菜单所需的条件是没有问题的，所以就想到是不是组件中有问题，查找到显示页面的。如果各位小伙伴有更好的解决办法，还请推荐！有知道具体原因的还请多多指教！我是用的第一种办法。加上以后就没有跳转空白的问题了，暂时算解决了。加跳转动画，keep-alilve缓存，具体什么原因还不明确。2、注释掉AppMain中的transition。外包裹了一层 div ，并加上key。记录一下此问题，耗费了我好长时间。
若依框架路由跳转成功却显示空白页面问题
m0_59792807的博客
04-01 794
在使用若依框架时，创建好了对应的菜单，路由，分配权限以后。点击菜单却显示空白页面，此时路由url显示已经跳转过去，但是页面空白，同时没有请求任何的接口。
【踩坑】Vue3项目正常跑动后页面空白问题
Vivien_CC的博客
09-07 1742
近期踩了个坑，Vue3搭建的项目能够正常跑动，但是页面却是空白的，控制台也不报错，只留下一行警告：发现是 router 入口文件（一般是在 router 文件夹下的 index 里面）的写法和 vite 版本不匹配的问题。随着 Vite 版本的更新，一些 API 可能会发生变化或被弃用，这会导致在升级 Vite 或项目迁移时遇到兼容性问题。我遇到的问题正是因为 Vite 的版本更新导致了 import.meta.globEager 的使用方式变化。
若依前端，菜单栏切换时刷新问题 [页面菜单切换时，页面总是重新刷新，导致页面输入的查询参数重载清空]
qq_40603125的博客
05-17 3171
组件中name、id和菜单中路径保持一致即可，不要写list。
vue3中所有页面需要手动刷新一下才能显示，控制台没有报错
kanno的博客
04-23 1269
vue3中所有页面需要手动刷新一下才能显示，控制台没有报错。登录进来是进入首页，然后切换任何页面都是空白，但是控制台没有报错。在其他页面刷新后却能显示，然而切换到首页刷新后再切换到其他页面又是空白。
解决vue-router 切换tab标签关闭时缓存问题
01-19
在router入口页面加上 keepAlive: true // 需要被缓存 false则不需要 { path: 'fundProListG', component: resolve => require(['@/pages/product/fundPros/fundTab/fundTab.vue'], resolve), title: '基金首页...
解决vue多个路由共用一个页面的问题
08-27
在 Vue 开发中，遇到多个路由需要共用一个页面的需求是非常普遍的，特别是当路由是通过动态添加的，不同的路由展示的东西只是数据不同其他没有变化。这篇文章将与您分享解决 Vue 多个路由共用一个页面的问题，具有很...
ruoyi-vue的tab打开时，怎么查看缓存
09-10
在Ruoyi-Vue项目中，如果你想在Tab打开时检查是否有缓存数据，你可以按照以下步骤操作： 1. 首先，你需要在项目中引入相关的缓存管理库，例如`vue-router-cache-middleware`或`axios-cache-adapter`等，它们可以...
【Vue3+若依框架】切换路由出现白屏
最新发布
Owen的博客
06-26 111
在做项目过程中出现了，切换页面，出现了内容区域白屏，不是整个页面白屏。开始我一直以为是路由权限配置或者路由配置的问题，后来才发现是。，在vue3语法中 tempalte 多个根节点也不会报错。
【Ruoyi】若依默认打开第一个子菜单，三级菜单时默认跳转到第一个子菜单
ew45218的博客
12-27 1812
官方给出的答案是处理2级菜单的，当菜单为三级时就会出现问题，打开404。在ruoyi-vue中，默认打开第一个子菜单问题处理。
前端接入若依后，页面白屏问题排查
lj940628的博客
12-14 1475
开发过程中的问题排查
若依v3.2问题解决：菜单路由不匹配 / 跳转路由页面空白
喜大普奔
07-06 4324
结果测试发现是router-view下的＜transition/＞标签添加“out-in“,导航到其他画面为空白。菜单路由不匹配 ，在菜单管理中匹配代码中的相应组件，可是在页面上总是报匹配错误，下面是报错情况和相关数据库。因为店铺管理是一个目录，而店铺详情和店铺列表是菜单，路由规则中目录要有一个菜单匹配，也就是path也相同。若依用router跳转路由时，页面白屏，，虽然比之前少了点效果，但bug解决了。
解决若依Vue3前后端分离添加动态路由切换菜单页面不显示(空白页面)问题
m0_72837519的博客
07-27 6106
在/layout/components/AppMain.vue找到AppMain.vue文件,添加以下代码即可。今天在做公司新项目时遇到一个问题,在使用若依vue3版本时遇到了添加动态路由页面有时候不显示的问题,在这里添加后,刷新页面也没有显示。最终发现是因为需要给router-view加一个key标志。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值