解决若依Vue3前后端分离---路由切换时显示白屏

VIP解决若依Vue3前后端分离---路由切换时显示白屏
解决基于Vue3若依前后端分离项目中出现的路由正常切换但是就是不显示数据的问题,也就是不发起网络请求的问题。
开通可读全文 ·1.6k 人阅读
最低0.47元/天 解锁文章

解决若依Vue3前后端分离---路由切换时显示白屏

1.问题重述

解决基于Vue3若依前后端分离项目中出现的路由正常切换但是就是不显示数据的问题,也就是不发起网络请求的问题。

找到如下位置中AppMain.vue文件

将除了css中的代码进行替换成如下的代码。

<template>
  <section class="app-main">
    <router-view v-slot="{ Component, route }" :key="routeKey">
      <transition name="fade-transform" mode="out-in">
        <keep-alive :include="tagsViewStore.cachedViews">
          <component
              v-if="!route.meta.link"
              :is="Component"
              :key="route.path"
          />
        </keep-alive>
      </transition>
    </router-view>
    <iframe-toggle />
  </section>
</template>

<script setup>
import { useRoute } from 'vue-route
VIP 解决:RuoYi点击菜单出现空白页面,无报错 前端使用若依框架(vue3版本),在开发过程中有时会出现切换菜单或者tab,页面空白的情况,刷新页面后又恢复正常。出现这种情况一般是在页面停留了几分钟再操作或者短时间多次跳转,偶尔也会莫名奇妙的出现,但就因为同时使用了transition和keep-alive,并在组件内又使用了transition导致的(原理还不了解,可能是缓存了动画的原因,知道的大佬可以解答下)网上看到部分开发者也遇到过这个问题,应该是框架本身的bug,找寻之后发现在。目前本人只了解到以上两种解决方案。 开通可读全文·4.9k 阅读·23 点赞·31 收藏 阅读全文

相关推荐

若依框架的介绍与基本使用(一起走进若依框架的世界)

在我们之前的学习中我们接触以及了解了一些的框架结构,例如我们之前学习到的EasyUI、Bootstrap框架开发、LayUI、微信小程序开发等等。今天与大家分享的是一个开源的框架结构来利于我们的开发,今天带给大家的是RuoYi开发框架。RuoYi是一款基于的极速后台开发框架。RuoYi 是一个Java EE 企业级快速开发平台,基于经典技术组合内置模块如:部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、通知公告等。在线定时任务配置;支持集群,支持多数据源,支持分布式事务。

weixin_74352229的博客 6万+

Vue3若依框架路由切换不请求数据?可能是这个keep-alive配置惹的祸

本文深入分析了Vue3若依框架中路由切换时数据不更新或白屏问题的根源,指出其核心在于Vue Router与<keep-alive>缓存机制的配置冲突。文章提供了从快速修复到体系化优化的多种解决方案,并重点推荐结合智能Key与组合式API侦听器的最佳实践,帮助开发者彻底解决路由切换不请求数据的问题。

milk5的博客 1080

若依Vue3动态路由切换白屏的根因分析与完整解决方案

在Vue3后台管理系统的开发中,动态路由是权限控制的核心机制,它根据用户角色动态生成路由表,实现菜单权限的精细化管理。然而,动态路由的注册时机若与导航守卫的执行顺序不协调,极易导致路由切换时页面白屏或刷新后404。这类问题在若依这类前后端分离框架中尤为常见,根因往往在于addRoute执行时机、嵌套路由递归注册不完整、Pinia响应式状态丢失以及Nginx历史回退配置缺失。本文从Vue Router的工作原理出发,分析路由守卫中异步注册路由与导航放行的竞态条件,阐述工程实践中如何通过递归注册路由树、优化st

weixin_31306591的博客 269

SpringBoot+Vue3宠物领养系统:3小时搭建前后端分离毕设项目

在Web开发领域,前后端分离架构已成为构建现代应用的主流范式,其核心在于通过清晰的职责划分提升开发效率和系统可维护性。该架构的原理是前端负责用户界面与交互逻辑,后端专注于业务处理与数据持久化,两者通过RESTful API进行通信。这种模式的技术价值在于实现了技术栈解耦、团队并行开发以及更好的用户体验。其典型应用场景包括各类管理系统、电商平台和社交应用。本文聚焦于一个基于SpringBoot和Vue3的宠物领养管理系统实战项目,该项目完整实现了用户管理、宠物信息CRUD、领养申请与审核等业务模块,为计算机专

weixin_34150830的博客 414

Android音频输出流实战:从AudioFlinger到HAL层的完整调用链解析

本文深入解析了Android音频输出流的完整调用链,从应用层的AudioTrack和AAudio API,到系统服务AudioFlinger的混音调度,最终抵达硬件抽象层(HAL)。文章结合实战经验,探讨了如何利用底层机制优化音频延迟、处理设备切换,并提供了性能调优与问题排查的具体方法,是开发高性能音频应用的实用指南。

weixin_29208327的博客 248

已解决-Parallels Desktop 16 网络初始化失败:您的虚拟机将继续正常运作,但将无法连接网络

我是月球挖掘机,相信不少打工人为了尝鲜已经更新了MacOS 11 Big Sur,当然,苹果每次的系统大更新,都会给我们软件的功能无法使用惊喜,这次的也不例外。 这个问题是我在更新macOS Big Sur之后,Parallels Desktop打开虚拟机后,提示: 报错信息 网络初始化失败:您的虚拟机将继续正常运作,但将无法连接网络 这是我的软件版本: 起初我以为是我的虚拟机坏了,结果重装了一遍虚拟机,没有任何用处。我开始在网上找方法,只能找到那个使用命令行打开软件的命令,除此之外没有了

月球挖掘机 5万+

VSCode搭配Keil开发STM32:从环境配置到代码跳转全流程(避坑指南)

本文详细介绍了如何使用VSCode搭配Keil进行STM32开发,从环境配置到代码跳转的全流程指南。通过安装必备插件和正确配置项目文件,开发者可以在VSCode中享受现代编辑器的便捷功能,同时保留Keil的编译调试能力,提升嵌入式开发效率。

weixin_28832121的博客 246

吹气压力传感器US6310 US6330调试

更换压力传感器, 从US6310 更换为US6330。 6310有一个准备好引脚,AD转换完成后会给MCU一个脉冲 而6330就没有这个功能,6330这个引脚是用来选择SPI还是I2C接口的。(6330没有复位引脚,内部有POR功能) 因此在实现上是有根本区别的, 其它方面使用的命令也不一样, 6310 A8 A9两条命令,一个命令模块醒来,一个命令模块休眠, 6330只有一条命令AA, 命令模块开始转换。 针对这2个模块作为2种处理方法, 1. 6310,可以设置一...

明天乌儿会歌唱 2012

基于JAVA的GB28181实现之SIP服务核心组件解析

本文深入解析了基于JAVA的GB28181标准中SIP服务的核心组件实现,包括协议栈选择、消息处理引擎、事务管理器等关键技术点。通过实战案例分享海康威视、大华设备的特殊处理技巧,并提供性能优化和常见问题排查指南,帮助开发者高效构建稳定的视频监控系统。

weixin_30892037的博客 254

卷积神经网络中的自注意力机制(Self-Attention Mechanism)

卷积神经网络中的机制表现为操作,其实现过程与Seq2Seq模型的自注意力机制类似。标准的卷积层是一种局部滤波操作,其输出特征上的任意位置是由对应输入特征的一个邻域构造的,只能捕捉局部特征之间的关系。而自注意力机制通过计算任意两个位置之间的关系直接捕捉远程依赖,而不用局限于相邻点,相当于构造了一个的卷积核,从而可以捕捉更多信息。在卷积网络的自注意力机制中,首先构造输入特征x的键特征fx, 查询特征gx和值特征hx;

AI天才研究院 1489

108、AWB 时间滤波器:帧间白平衡平滑,防止色彩跳变与过冲

摘要: 文章探讨了AWB(自动白平衡)时间滤波器的设计与优化,以解决帧间白平衡跳变和过冲问题。通过自适应状态机(STABLE/TRANSITION/JUMP)动态调整平滑系数alpha,结合帧率归一化和过冲保护(方向检测+限幅),实现场景切换快速响应与静态稳定性的平衡。作者分享了工程经验:避免固定阈值、联动AE/AF、真实场景验证,并推荐简化卡尔曼滤波替代IIR。最终方案在旗舰机前置摄像头中成功消除“闪白”现象,强调参数需动态适应光照与色温变化。

sundong_81的博客 58

一张图讲透银行个人外汇业务逻辑和实操

个人外汇业务主要分为结售汇和外币兑换两类,前者满足日常跨境需求,后者因投机属性多数银行已暂停。业务核心是利用汇率波动实现货币兑换,满足支付或投资需求。交易涉及客户分类、主流币种、多种渠道和汇率计算规则,需区分直接/间接标价法判断汇率走势。银行通过"货币兑换"科目核算损益,采用期末折算确认盈亏。监管要求包括5万美元年度额度、合法渠道、真实性原则及大额申报等。随着跨境金融数字化发展,掌握基础逻辑和合规要求是安全参与外汇业务的关键。

银行信息系统应用架构详解 272

复分析 阿尔福斯(Ahlfors) 第三版答案 英文

答案分为十章,有部分习题没有答案,全英文复分析阿尔福斯(Ahlfors) 第三版答案

pscad IEEE标准系统搭建说明

pscad IEEE标准系统搭建说明,包含典型的IEEE 9节点、14节点、30节点、39节点和118节点系统。内含标准测试系统的原始数据和潮流结果。

Statistics and Machine Learning Toolbox

Statistics and Machine Learning Toolbox(带书签),MATLAB统计学习工具

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

上一篇: 若依顶部导航栏改造
下一篇: 解决elementUI中使用checkbox无法选中的问题

双11狂欢大促

盲盒赢 定制羽绒服

开启惊喜盲盒,抽取你的专属好礼

— 惊喜奖品抢先看 —
不懂代码的孩子
博客等级 码龄9年 622粉丝 570原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不懂代码的孩子

谢谢大佬

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值