vue当前页面刷新后白屏问题

最新推荐文章于 2024-12-22 09:54:17 发布

小陈成啊

最新推荐文章于 2024-12-22 09:54:17 发布

阅读量1.7k

点赞数

分类专栏： Element 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/chentianchengBUG/article/details/108575869

版权

Element 专栏收录该内容

10 篇文章

订阅专栏

探讨了在路由配置后，点击菜单进入页面正常显示，但刷新页面后出现白屏现象的原因及解决思路。检查路由配置项是否存在空格是关键步骤之一。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题存在原因：路由配置后点击菜单进入该页面，页面正常显示，刷新页面后页面白屏不展示内容

路由配置问题

检查路由配置项是否存在空格

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小陈成啊

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

《Vue3笔记》第24节：Vue3项目解决页面刷新后路由菜单出现白屏的问题

✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过优快云记录学习心得和笔记内容。

01-28

398

前一个小节的内容中，已经介绍了如何动态加载菜单，虽然功能实现了，但是你会发现，当页面刷新的时候，此时访问的路由菜单会出现白屏的效果。当我们访问某个菜单之后，此时刷新一下页面，这个时候访问的路由菜单就会白屏（空白页面），或者跳转到指定的404页面），效果就如下图所示：**那么，为什么页面刷新之后，我们访问的路由菜单会出现白屏效果呢？**下面就来看下这个问题的根本原因吧。

Vue首屏白屏如何解决

youhebuke225的博客

05-30

2439

通过结合以上解决方案，可以有效地解决Vue首屏白屏问题，并提升用户体验。在实际开发中，应根据项目的具体情况和需求，选择合适的解决方案进行优化。二、文件引用和打包问题。三、浏览器兼容性问题。四、异步数据请求问题。

3 条评论您还未登录，请先登录后发表或查看评论

vue动态添加路由后刷新页面白屏问题

weixin_47673864的博客

06-10

4497

页面刷新白屏其实是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了在通过vuex中的state属性存储路由在sessionStorage中，只是存储了左侧菜单栏展示的信息path地址，但是并没有存进去路由详细信息，比如name，meta值，利用vue插件即可看到本地route里面的真实数据！所以；只需要添加路由守卫，在每次页面刷新的时候都来判断是否添加的动态路由【这里设置一个变量记录是否添加的布尔值】，如果为false，即再次执行一遍添加动态路由的过程即可next（）在

解决Vue刷新页面白屏问题

qd1014751893的博客

04-19

1873

vue刷新页面方式，vue白屏问题

vue页面白屏的原因及优化

热门推荐

nick_zhang的博客

10-18

1万+

一、原因：单页面应用的 html 是靠 js 生成，因为首屏需要加载很大的js文件(app.js vendor.js)，所以当网速差的时候会产生一定程度的白屏二、解决办法：（1）优化 webpack 减少模块打包体积，code-split 按需加载（2）服务端渲染，在服务端事先拼装好首页所需的 html （3）首页加 loading 或骨架屏（仅仅是优化体验）（4）缓存一定要使用，但是请注意合理使用（5）代码压缩，服务端压缩，浏览器端解压缩三、HTTP压缩的过程浏览器发送Http r

解决vue页面刷新产生白屏

qq_41979331的博客

06-23

3142

app.vue <template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div> </template> <script> export default { provide() { return { reload: this.reload } }, data() {.

vue3实现动态菜单和动态路由和刷新后白屏处理

bu_xiang_tutou的博客

03-12

7545

项目中，当每一个角色得到的界面不一致的时候，我们就不能使用静态菜单了，而是要从后端得到动态的菜单数据，然后动态的将菜单数据展示在界面上。除了在界面展示，也还要将界面的路由动态添加，在路由动态添加之后，你可能会出现刷新界面，界面变白的情况，页面刷新白屏其实是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了。这种情况我会在最后给一个处理方法。

解决vue build打包之后首页白屏的问题

08-27

在开发Vue.js应用时，我们通常会使用`npm ...综上所述，解决Vue build打包后首页白屏的问题主要涉及调整静态资源的路径配置。同时，理解其他可能的原因和采取相应的优化措施，将有助于构建更稳定、适应性强的Vue应用。

vue倒计时刷新页面不会从头开始的解决方法

10-15

为了解决这个问题，我们需要在Vue中实现倒计时数据的持久化，这样即使在页面刷新或重新进入后，倒计时依然能从上次的剩余时间继续进行。文章中介绍了在Vue中保存倒计时数据到Vuex，并利用localStorage进行本地持久化...

Vue菜单页初始打开没问题,刷新后出现Whitelabel Error Page 404问题

weixin_44741820的博客

01-30

818

一般404都是路由的路径问题,去看了在vue.config.js中配置的本地代理,发现并没有重复冲突项,后面想会不会是因为包含了就导致了?项目中途改过nginx配置,由原来的hash改为了history,有的菜单没有这个问题,有的就有,由于这次是新建菜单后出现了问题,决定解决一下.路由中的开头字母act和代理中的act产生冲突了 ,导致页面刷新直接去请求后端地址了,所以配置时不止不要名称一样,尽量不要路由地址开头字母也一样。在新建菜单页后,又出现了whitelabel error page,

如何解决页面刷新时白屏的问题？

Missbelover的博客

05-28

1045

如何解决页面刷新时白屏的问题？ this.isRouterAlive = false this.$nextTick(function () { this.isRouterAlive = true; //写对应的调用接口代码 })

【vue项目部署】vue路由在多级页面下，页面刷新空白（history模式下）的排查过程&问题解决

记录

01-03

2003

在项目打包部署后，出现了多级目录刷新后白屏的问题。记录一下排查过程与解决方法。

解决页面刷新时白色闪屏问题

nunumaymax的博客

09-26

617

在浏览网页时，每次页面刷新都会有一段短暂的白屏，十分影响用户体验。其实有一个最简单的解决方法，就是直接把body元素的background-color直接设定为页面的主色调，我这里是黑色。这样处理完成后就没以后闪白屏的情况了

如果刷新网页或者下拉出现白屏可能是什么原因以及url相关问题

qq_46111138的博客

08-03

1851

· 如果出现刷新网页或者下拉白屏可能的原因 · 如何将长url转化为短url · 如何屏蔽url

vue切换页面白屏问题怎么解决

qingdouxiaohua的博客

04-20

2609

Vue 切换页面时出现白屏问题，可能由多种原因引起。

vue导致页面加载白屏时间长的原因有哪些，怎么优化

02-25

2754

白屏时间是指用户输入内容回车到浏览器开始出现第一个字符,也就是说(页面)开始显示内容的时间。当用户点开一个链接或者是直接在浏览器中输入URL开始进行访问时，就开始等待页面的展示。页面渲染的时间越短，用户等待的时间就越短，用户感知到页面的速度就越快。这样可以极大的提升用户的体验，减少用户的跳出，提升页面的留存率。

Vue2中动态路由添加后刷新页面呈现空白的bug

qq_49172635的博客

05-15

1257

在开发一个多用户后台系统时，需要将角色对应的菜单信息使用动态路由的方式添加到前端的router中，但是每当进入动态生成的路由时，只要刷新页面，就会显示空白，甚至还会出现前端的页面跳转直接变成了对后端接口的请求；

vue项目动态路由刷新界面白屏undefined问题

DeppBing的博客

12-22

721

vue项目动态路由刷新界面白屏undefined问题这里我设置了一个 routersArr key值进行路由的缓存；例如路由配置的时候直接使用原始的路由配置；这样刷新以后就可以了；当然我们是有追求的向往进步的这样也只是饮鸩止渴。这里也是调试了好久终于是解决了；总共尝试了多种解决方案；：if判断读缓存添加路由也不可放在 new VueRouter()后面，否则也会加载白屏。这是一个笨方法，但是出奇的好用；确保首页是静态路由后，请求接口后即可将请求回的路由信息进行缓存。

Vue3动态路由页面刷新找不到路由空白页面

qq_48256948的博客

01-02

4170

1.新年的第一天，作为一个刚用VUE3的菜鸟程序员遇到了一个获取用户权限动态路由的问题，如果不跳转刷新页面路由都能正常使用，但是一刷新页面通过 router.addRoute()添加的路由就会缺失，并且报路由找到的警告。 2.程序员快速解决bug的方法就是找度娘，但是这次度娘好像不给力了，我看到大多数大佬说的就是添加next({...to,replace: true})，我这里也是直接CV大法看问题解决了吗，结果发现还是不行，只要在动态路由上刷新页面就会变成空白页 3.所以我们这采用常规解决问题的办法

uniapp vue3 刷新当前页面