vue3页面跳转产生白屏，刷新后能正常展示的解决方案

最新推荐文章于 2025-05-12 14:50:58 发布
最新推荐文章于 2025-05-12 14:50:58 发布
阅读量5.6k 收藏 29
点赞数 19
CC 4.0 BY-SA版权
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45288172/article/details/135980802

可以依次检查以下问题：
1.是否在根组件标签最外层包含了个最大的div盒子包裹内容。
2.看看是否在template标签下面直接有注释，如果有需要把注释写到div里面。（即根标签下不要直接有注释）在这里插入图片描述

3.在router-view 中给路由添加key标识。
！！注意：有使用layout封装布局的，是在layout下的主页面中的 router-view 添加标识，不是在src根目录下main.vue中修改（在这个文件修改会造成每次切换路由导航标签都会收起）
在这里插入图片描述
4.使用window.location.href=‘/url’进行跳转，不要用router.push。（关键）
使用window.location.href=’/url’来跳转它会刷新页面，而router.push是不会刷新页面的。
在这里插入图片描述
我把这4个都修改后，成功解决了跳转白屏的问题。

参考文章
参考文章
参考文章

Vue3大屏项目优化白屏时间，这个方法简直无敌
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
12-24 454
最近在做一个 Vue3 的可视化大屏项目时，遇到一个头疼的问题：首页加载时总会有一段白屏时间，尤其是在数据量较大的情况下，体验极差。琢磨了很久，终于找到了一种优雅的解决方案，用到了。白屏的主要原因是，页面在首屏渲染之前，需要等待数据加载和资源解析完成。来控制页面渲染时机，是一种简单但非常有效的优化方法。在 Vue3 可视化大屏项目中，分批加载可以显著减少首页白屏时间，提升用户体验。，将首屏关键内容优先加载，非关键内容延迟加载，这样既能减少白屏时间，也能提高用户的体验感。，逐帧控制页面内容渲染。
《Vue3笔记》第24节：Vue3项目解决页面刷新后路由菜单出现白屏的问题
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
01-28 474
前一个小节的内容中，已经介绍了如何动态加载菜单，虽然功能实现了，但是你会发现，当页面刷新的时候，此时访问的路由菜单会出现白屏的效果。当我们访问某个菜单之后，此时刷新一下页面，这个时候访问的路由菜单就会白屏（空白页面），或者跳转到指定的404页面），效果就如下图所示：**那么，为什么页面刷新之后，我们访问的路由菜单会出现白屏效果呢？**下面就来看下这个问题的根本原因吧。
vue中页面跳转白屏的解决方式，同一路由地址，参数不同跳转白屏的解决方式
smouns_的博客
11-02 2062
vue中页面跳转白屏
vue3在运行时路由可以正常跳转，但是页面空白，刷新页面恢复正常[已解决]
zf2451597310的博客
03-20 4097
其实本质上，一个单文件组件会被各种各样的loader处理成为.js文件（因为当你import一个单文件组件并打印出来的时候，是一个vue实例），通过template的任意性我们知道，template包裹的HTML可以写在任何地方，那么对于一个.vue来讲，这个template里面的内容就是会被vue处理为。打给比方来说，一个 Vue 实例只拥有一个钥匙，一个钥匙只能开一把锁，但是页面上有很多把锁，如果你不说清楚它是哪把锁的钥匙，Vue 实例就不知道接下来要怎么做了，所以页面顺其自然的就不会进行渲染了~
多入口解决vue-router跳转空白新页面需求
最新发布
kilokn的博客
05-12 557
在Vue.js应用开发中，通常会在App.vue中放置全局公共组件，但某些特殊页面（如登录页、广告落地页）可能需要完全空白，不受这些组件影响。虽然可以通过路径判断控制组件的显示，但当有多个空白页面需求时，这种方法会变得繁琐。为此，可以使用多入口（Multi-Entry）构建独立的空白页面。多入口允许在一个前端工程中配置多个独立的HTML和JS入口文件，使不同页面拥有完全独立的Vue实例、路由和样式。通过修改Webpack或Vite的构建配置，可以创建独立的空白页入口，并配置相应的HTML、Vue入口文件和组
给router-view内嵌transition动画，导致路由切换时白屏（不加载）问题
weixin_63461348的博客
04-05 1542
【代码】给router-view内嵌transition动画，导致路由切换时白屏（不加载）问题。
解决Vue3中路由页面跳转出现白屏，刷新页面之后展示正常的问题
M_emory_的博客
07-04 1128
解决Vue3中路由页面跳转出现白屏，刷新页面之后展示正常的问题
vue3开发页面跳转时出现页面白屏
qq_55660255的博客
10-07 2443
vue3开发页面跳转时出现页面白屏
vue路由跳转白屏问题
weixin_43972213的博客
09-23 7378
当前问题： 比如当前路由为： `/projectDetail?Id=1&name=页面1` 通过页面改变了路由参数Id `/projectDetail?Id=2&name=页面1` 此时做的操作是： this.$router.push({ name: 'projectDetail', query: { Id: this.id, name: this.name } }) this.$router.go(0) 在这种情况下，会导致页面整体刷新，且出
vue3页面跳转白屏
qq_39041201的博客
04-17 738
在vue3项目中，使用layout封装布局，页面跳转时左侧菜单栏展示正常，右侧出现白屏，刷新页面后正常显示。
Vue项目部署在Spring Boot出现页面空白问题的解决方案
12-02
通过上述步骤，我们可以确保Vue项目在Spring Boot环境中部署时，无论是首次加载还是刷新浏览器，都能正确加载静态资源，避免出现页面空白和404错误。请注意，每个项目的具体配置可能因环境而异，因此在实际操作中，...
Vue-Router路由首次跳转页面空白,刷新页面又可以正常访问
热门推荐
全干攻城狮
05-18 1万+
背景 最近项目过程中出现了一个奇怪的问题，当用户登入系统后部分路由首次跳转时会出现空白页面，但是在该页面上刷新又可以正常显示路由对应的页面。 系统内包含用户、角色、菜单等管理模块，前端使用了动态路由 问题复现 系统内有两个角色，A1和A2 A1角色包含P1、P2、P3页面的权限 A2角色包含P1、P2、P3、P4、P5页面的权限 当首次使用A1角色对应的用户登入系统时，侧边栏所有菜单都可以正常访问 此时退出A1角色对应的用户并使用A2角色对应的用户登入系统，其中P1、P2、P3菜单对应的页面可以正常访问，
vue3+vite - 打包编译后页面白屏、CORS跨域、加载js/html文件失败、图片不显示、音视频不显示问题，解决打包生成index.html页面显示空白、找不到资源、报资源跨域打不开报错问题！
高级前端工程师
05-30 1万+
vue3，vite，build，打包编译，vite打包后页面白屏，index.html，dist，跨域，CORS报错，图片不显示，资源js加载出错，部署服务器后打开，页面空白，网页不显示，浏览器控制台，全是报错，vite+vue3执行build打包后index.html无法打开怎么办，打不开咋办，啥也不显示，index.html打开空白，打开cors跨域怎么解决，网页上线后一刷新就报错，上线后，typescript，ts，404-Page Not Found，vite build后访问报错，Vite+Vue
vue切换页面白屏问题怎么解决
qingdouxiaohua的博客
04-20 2663
Vue 切换页面时出现白屏问题，可能由多种原因引起。
Vue3 + Vite 页面白屏问题（开发环境+生产环境）
Yana's Blog
05-06 9478
在一次开发过程中，使用 Vue3 + Vite 做了几个简单页面，支持 PC 端和手机端， PC 端测试一切安好，手机端访问本地 IP 进行预览，苹果手机功能正常，但安卓手机直接白屏。
解决vue3，动态添加路由，刷新页面出现白屏或者404
weixin_65363325的博客
11-29 4735
在做毕设的时候，在权限路由得到时候，我问通过router**.**addRoute(item)的方式，在路由守卫动态添加路由刚开始没什么问题，页面的都能正常显示，网络请求也能发送，后来出现了刷新页面，跳转到404解决方法提取出404代码片段追加到处理好的权限列表的末尾我项目采用的vue-router是4.3.3版本。
Vue3路由跳转页面显示空白问题
CZDBGSY的博客
06-20 751
A页面有template下有两个div，虽然V3声明可以多个div。但从A页面发起的跳转会失败，显示为空白。将router.push 字符串传参改为 {name：‘...’} 或者 {path：‘...’}就可。
vue3实现动态菜单和动态路由和刷新后白屏处理
bu_xiang_tutou的博客
03-12 7597
项目中，当每一个角色得到的界面不一致的时候，我们就不能使用静态菜单了，而是要从后端得到动态的菜单数据，然后动态的将菜单数据展示在界面上。除了在界面展示，也还要将界面的路由动态添加，在路由动态添加之后，你可能会出现刷新界面，界面变白的情况，页面刷新白屏其实是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了。这种情况我会在最后给一个处理方法。
vue项目切换页面白屏不显示解决方案
苦夏木禾
08-10 1282
页面切换后白屏解决方法
vue后台管理跳转页面 不刷新页面
01-14
### 实现 Vue 后台管理系统中页面跳转不刷新解决方案 #### 使用 Vue Router 构建单页应用 (SPA) Vue Router 是 Vue.js 官方的路由管理器，允许构建单页面应用程序(SPA)，其中不同视图之间的导航不会触发整个页面重新加载[^1]。 为了确保页面跳转时不刷新，在初始化项目时应正确设置 Vue Router： ```javascript import { createRouter, createWebHistory } from 'vue-router' import Home from './views/Home.vue' const routes = [ { path: '/', name: 'Home', component: Home, }, ] const router = createRouter({ history: createWebHistory(), routes, }) export default router; ``` 此配置使用 `createWebHistory` 创建历史记录模式的历史对象，使得 URL 更加美观且无 hash 符号。这有助于模拟传统多页网站的行为而不实际重载页面。 #### 处理特定场景下的路由行为 对于特殊需求，比如点击名为 "gridManagement" 的路由链接时执行单点登录并打开新窗口的情况可以这样处理: ```javascript // 在组件内方法或事件处理器里调用 methods: { handleGridManagement() { const url = 'https://third-party-system.com/grid-management'; window.open(url, '_blank'); } } ``` 通过这种方式可以在满足条件的情况下直接操作浏览器 API 打开新的标签页而不是改变当前 SPA 中的内容[^2]。 #### 避免页面切换过程中的性能问题 针对页面切换过程中可能出现的卡顿和白屏现象，可以通过监听 `$route` 变化来优化用户体验。然而简单的基于索引比较的方式存在局限性，推荐采用更灵活的状态管理策略配合懒加载技术减少不必要的资源消耗[^3]: - **状态管理**: 使用 Vuex 或 Pinia 来集中管理和同步各个模块间的数据依赖关系； - **按需加载(懒加载)** : 对于大型应用来说，将各功能模块拆分为独立文件并通过动态导入(`import()`函数)引入能够有效降低初始包大小； 综上所述，遵循上述建议可帮助开发人员创建流畅高效的 Vue 后端管理平台，并解决因不当配置引起的频繁刷新等问题。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值