VUE 跳转至某一页面后 再跳转至其他页面出现空白 刷新后正常显示的问题解决

已于 2022-03-30 09:04:42 修改
阅读量2.6k 收藏 3
点赞数 8
文章标签： vue
于 2022-03-27 20:20:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/NothingOnHead/article/details/123780286
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

VUE 跳转至某一页面后 再跳转至其他页面出现空白 刷新后正常显示的问题解决

今天测试项目的时候出现了这个问题，搞了我好几个小时，原来一直以为是路由出了问题，看了半天也没解决，结果最后发现问题很简单，唉！

检查一下template最外层的div是不是被误删了，如果误删了或者没加上，加上即可，示例如下：

改前：
在这里插入图片描述
改后
在这里插入图片描述
希望可以帮遇到相同问题的童鞋们节约时间吧！

《Vue3笔记》第24节：Vue3项目解决页面刷新后路由菜单出现白屏的问题
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
01-28 390
前一个小节的内容中，已经介绍了如何动态加载菜单，虽然功能实现了，但是你会发现，当页面刷新的时候，此时访问的路由菜单会出现白屏的效果。当我们访问某个菜单之后，此时刷新一下页面，这个时候访问的路由菜单就会白屏（空白页面），或者跳转到指定的404页面），效果就如下图所示：**那么，为什么页面刷新之后，我们访问的路由菜单会出现白屏效果呢？**下面就来看下这个问题的根本原因吧。
工作遇到的坑之vue3路由切换时，页面不正常显示，刷新后正常显示（路由切换白屏问题）
qq_51415791的博客
08-30 838
其实vue在执行的过程中，会复用相同的主件，对于路由有多个子路由来说，当在子路由来回切换时，会导致页面不刷新的问题，这是因为不再执行created和mounted这些。细心的小伙伴已经发现了，解决前和解决后的代码，在 router-view标签中，多出了key标识，那我们去思考一下，为什么加key之后，就会解决白屏问题呢？通过设置key值，从而避免了组件复用，子路由间来回切换时，页面都会重新加载。，可以通过watch来监听$route的变化从而加载不同的组件。首先，在这里我来从两种情况去解释一下key。
【vue】ios在详情页中返回到列表页出现空白的问题
炒饭的博客
08-07 3380
移动端开发 vue项目中，ios机器上点击返回列表页的时候，会出现空白现象，触屏一下或者拉动一下，数据才会显示出来，针对此问题，尝试了很多次，最终解决方法如下： 给列表的外层容器加上如下样式： overflow-y: auto; -webkit-overflow-scrolling: touch; height:100%; 只需几句css 就能搞定...
vue路由跳转本来正常,跳转到某一个页面再跳出其他页面,出现页面空白
zhangyu_98的博客
03-11 3314
昨天在写代码的时候遇到一个很奇怪的问题,本来路由都是正常的,结果我跳转到某一个页面后再跳出结果就页面空白了,也不能再跳回原来的页面,刷新后页面又能够正常显示了,后面也筛选了路由的书写都没发现异常. 后面看到页面的时候发现我在template内的根元素外面有一个注释,删除之后就正常了,后面想到html也会吧注释的内容当成一个标签进行显示,这样的话我的template下面就有了两个根元素,但是vue3是已经支持多个根元素了, 这里的原因可能是因为我的路由出口使用 transi...
Vue3中，router配置后，路径跳转没问题，但页面空白，原因总结
最新发布
2201_76036128的博客
04-17 398
router配置后，路径跳转没问题，但页面空白，排查后发现是createWebHashHistory调用忘记加括号
Vue3中切换路由页面不展示内容，刷新后页面正常显示
~
07-18 5013
解决办法，给路由添加key。
解决VUE返回上一页，上一页空白问题
caoyan0829的博客
01-17 2674
问题： 我做项目的时候 发现vue返回上一页的时候， 有时候router不会读取router上的参数，就会导致我的项目空白。 思路： 让返回上一页的时候，上一页能读取到路由参数 解决： 根据上下页的name为判定 去给上一页刷新 this.$router.beforeResolve((to, from, next) => { if (to.name ...
关于vue的H5页面在ios上打开，页面空白的问题
qq_37493515的博客
04-29 3237
关于vue写的H5页面在ios上打开，页面空白的问题 这个问题发生在一个永不升级的用户身上 机型：iPhone X 系统：ios 11.2.6 问题描述：打开链接可以显示页面的标题，但是页面空白，没有走任何接口 时间：2021年4月29 产生这种原因真的很难复现，2021年了，我要怎么找到一个系统是11的iphone，也不是没想过把自己手机降级，但是又麻烦又不安全。 所以下载了XCode，找到了对应机型和系统，浏览器地址栏输入地址，回车。。。果然是白屏 明白了，ios11不支持es6，所以应用较少，改成es
Vue实现动态路由及登录404页面跳转控制页面刷新空白解决方案.docx
10-26
本文档主要介绍了如何在Vue项目中实现动态路由、登录逻辑以及404页面跳转控制等功能，并解决页面刷新时出现空白的问题。 #### 动态路由与登录逻辑实现 ##### 路由配置 首先，在项目的`router/index.js`文件中进行...
Vue项目部署在Spring Boot出现页面空白问题的解决方案
12-02
在开发Vue应用并将其部署到Spring Boot环境中时，可能会遇到页面加载空白的问题。这通常是由于文件路径配置不正确，导致CSS、JavaScript等静态资源无法被正确加载。在本篇文章中，我们将深入探讨这个问题，并提供一...
关于解决vue3嵌套路由跳转后页面路由跳转正常但不走生命周期（白屏）强制刷新后正常
Evi7seve的博客
02-21 273
3 .判断router要跳转的路由组件是否 template标签中 根是否包含多个子元素（如有则将其用一个大标签包裹），其次 tempate根下紧接着是否有代码注释，如有则放到子标签中或删除。：（这个键值每次路由变化时都更新，强制Vue销毁旧的组件实例并创建一个新的实例。组件就会进行完整的重新挂载过程，其内部的数据绑定也会随之更新，从而达到刷新页面的效果）问题：vue3页面跳转成功，且页面路由层级嵌套，router.push跳转后页面白屏，刷新后正常。三步走战略走完，基本解决99的问题！
解决vue路由跳转未匹配路径时出现空白页的问题
Jeff的博客
11-19 2万+
在进行vue项目开发时，常用vue-router进行路由的导航，这种方式可以很好的进行路由和组件的匹配，但是当用户手动更改为未进行匹配的url时，系统找不到响应的组件进行页面渲染，就会出现空白页面。这种用户体验并不好，下面总结解决该问题的方法。 1.导航守卫 可以使用 router.beforeEach 注册一个全局前置守卫： const router = new VueRouter({ ...
记录一次vue3切页面，页面空白的问题
lln0001的博客
06-28 1082
因为添加了注释，导致vue把他当成fragment格式渲染了。。。
Vue-router跳转界面后显示空白，要刷新之后才会显示新页面，地址栏也跳转了（已解决）
Rick_and_mode的博客
10-29 5086
原来的错误的 解决方案 跳转的时候加上name属性 因为vue 路由名称可以进行匹配 这样绑定后 是唯一的跳转地址
解决Vue3中路由页面跳转出现白屏，刷新页面之后展示正常的问题
M_emory_的博客
07-04 1024
解决Vue3中路由页面跳转出现白屏，刷新页面之后展示正常的问题
vue3切换页面后刷新才能显示的问题(切换路由白屏)
web202的博客
09-30 5280
多谢 大哥 vue3切换页面后刷新才能显示的问题_qq_34559237的博客-优快云博客在网上搜了很多解决方案都不能解决,在这里记录一下自己的问题原因:是由于缺少一个根标签导致的Component inside <Transition> renders non-element root node that cannot be animated. at <Test onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref<...htt
vue3在运行时路由可以正常跳转，但是页面空白，刷新页面恢复正常[已解决]
zf2451597310的博客
03-20 4052
其实本质上，一个单文件组件会被各种各样的loader处理成为.js文件（因为当你import一个单文件组件并打印出来的时候，是一个vue实例），通过template的任意性我们知道，template包裹的HTML可以写在任何地方，那么对于一个.vue来讲，这个template里面的内容就是会被vue处理为。打给比方来说，一个 Vue 实例只拥有一个钥匙，一个钥匙只能开一把锁，但是页面上有很多把锁，如果你不说清楚它是哪把锁的钥匙，Vue 实例就不知道接下来要怎么做了，所以页面顺其自然的就不会进行渲染了~
vue项目切换页面会白屏，刷新之后才会正常显示(已解决)
精通前端技术，了解后端接口
04-07 5039
vue项目切换页面会白屏，刷新之后才会正常显示(已解决)
【Vue】解决路由切换，页面不更新的实用方法
热门推荐
汪小穆的博客
09-22 6万+
前言：vue-router的切换不同于传统的页面的切换。路由之间的切换，其实就是组件之间的切换，不是真正的页面切换。这也会导致一个问题，就是引用相同组件的时候，会导致该组件无法更新，也就是我们口中的页面无法更新的问题了。
vue3动态路由刷新后页面空白
03-15
<think>好的，我现在需要解决用户在Vue3中遇到的动态路由页面刷新后出现空白的问题。首先，我得回顾一下用户提供的引用内容，看看其他开发者是怎么处理类似问题的。 根据引用[1]，用户在Vue3中遇到动态路由刷新后找不到路由导致空白页。他们提到动态路由的实现方法，可能需要确保路由在刷新后仍然存在。引用[2]指出，动态路由在第一次进入正常，但刷新后空白，这可能是因为路由没有被正确持久化或重新加载。引用[3]则建议在首屏加载时请求动态路由并缓存，同时确保首页是静态路由，这样在刷新时可以从缓存中恢复路由。 接下来，我需要结合这些信息，整理出Vue3中的解决方案。Vue3使用Vue Router 4，可能的路由添加方式与Vue2不同。首先，动态路由应该在应用初始化时从持久化存储（如localStorage）中获取，并在路由配置前添加。这样可以确保刷新时路由已经存在。 然后，权限验证守卫中，需要处理动态路由的加载。在用户登录后，获取路由数据并存储到localStorage，然后通过router.addRoute动态添加。但要注意，添加路由后可能需要跳转到目标路由或回到首页，避免空白。 另外，404页面的处理也很重要。如果动态路由未正确添加，访问不存在的路径会导致404，所以通配符路由应放在最后，确保其他路由先被匹配。 还要考虑路由缓存的时机，确保在应用启动时从缓存中读取路由，并在每次更新路由时更新缓存。同时，使用router.isReady()来等待路由就绪后再挂载应用，防止初始渲染时路由未加载完成。 可能的问题点包括：未正确使用addRoute方法，缓存时机不当，路由顺序错误，或者未处理路由重定向。需要逐一检查这些方面，确保动态路由在刷新后能正确恢复，避免空白页。 最后，生成相关问题，帮助用户进一步理解和排查问题。比如如何持久化路由，如何处理404，如何优化加载速度等。</think>在Vue3中解决动态路由刷新后出现空白页的问题，需要结合路由持久化、初始化加载顺序和缓存策略。以下是具体解决方案： ### 一、核心解决步骤 1. **路由持久化存储** - 登录后立即将接口返回的动态路由数据存入`localStorage` ```typescript localStorage.setItem('dynamicRoutes', JSON.stringify(apiRoutes)) ``` 2. **初始化加载路由（关键）** ```typescript // router/index.ts const router = createRouter({...}) // 从缓存加载动态路由 const cachedRoutes = localStorage.getItem('dynamicRoutes') if (cachedRoutes) { const dynamicRoutes = JSON.parse(cachedRoutes) dynamicRoutes.forEach(route => { router.addRoute(route) // Vue3新增的API }) } ``` 3. **路由守卫处理** ```typescript router.beforeEach(async (to, from) => { if (!hasAuthToken()) return '/login' if (!hasLoadedRoutes) { const routes = await fetchRoutes() routes.forEach(route => router.addRoute(route)) localStorage.setItem('dynamicRoutes', JSON.stringify(routes)) return to.fullPath // 重定向到原始目标路径 } }) ``` 4. **确保首页静态化（必要前提）** ```typescript // 必须保证首页路由是静态声明 const staticRoutes = [ { path: '/', component: Home }, { path: '/login', component: Login } ] ``` ### 二、关键配置项 1. **404处理策略** ```typescript // 必须放在最后声明 { path: '/:pathMatch(.*)*', component: NotFound, meta: { isDynamic: true } } ``` 2. **白屏防护措施** ```typescript // main.ts router.isReady().then(() => { app.mount('#app') }) ``` ### 三、优化方案 1. **路由缓存更新机制** ```typescript watch(router.getRoutes(), (newVal) => { localStorage.setItem('routeCache', JSON.stringify(newVal)) }, { deep: true }) ``` 2. **路由加载状态管理** ```typescript let isRouteLoaded = false router.beforeEach((to) => { if (!isRouteLoaded && to.path !== '/login') { return { path: '/loading' } // 添加过渡页面 } }) ``` [^1][^2][^3]
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值