vue3项目路由跳转成功，但是页面空白，刷新一下才能显示

最新推荐文章于 2025-02-23 14:00:00 发布
最新推荐文章于 2025-02-23 14:00:00 发布
阅读量2.4k 收藏 11
点赞数 8
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zgwcyl/article/details/134202092
版权
本文介绍了在项目开发中，通过在<router-view>组件中添加$key属性，设置为`$route.fullPath`，可以有效防止同一路由下的页面无刷新加载，提高用户体验。

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

在项目搜<router-view，然后加上:key="$route.fullPath"，防止同路由页面不刷新

飞舞花下
关注
工作遇到的坑之vue3路由切换时，页面不正常显示，刷新后正常显示（路由切换白屏问题）
qq_51415791的博客
08-30 789
其实vue在执行的过程中，会复用相同的主件，对于路由有多个子路由来说，当在子路由来回切换时，会导致页面不刷新的问题，这是因为不再执行created和mounted这些。细心的小伙伴已经发现了，解决前和解决后的代码，在 router-view标签中，多出了key标识，那我们去思考一下，为什么加key之后，就会解决白屏问题呢？通过设置key值，从而避免了组件复用，子路由间来回切换时，页面都会重新加载。，可以通过watch来监听$route的变化从而加载不同的组件。首先，在这里我来从两种情况去解释一下key。
Vuerouter跳转界面后空白，要刷新之后才会显示
qq_44743216的博客
07-20 6027
Vue-Router路由首次跳转页面空白,刷新页面又可以正常访问
vue3 三级路由跳转成功但页面未刷新
weixin_43957246的博客
07-10 1267
在网上一番搜索后，发现是二级路由和三级路由共用了router-view导致的。（排查时可以试着在二级路由的组件里加上看看三级路由的组件会不会正常显示，如果可以的话大概率也是这个问题）在实现二级路由跳转到三级路由（菜单列表 -> 新增菜单页）时，会出现地址栏正确变动，但实际页面停留在菜单列表页并未改变的情况。需要注意的是 render h 在vue2和vue3里的用法不一样。
Vue3在监听路由刷新或重新加载时，监听路由
繁若华尘的博客
02-23 662
根据实际需求选择合适的方式，通常推荐优先使用生命周期钩子和路由监听。
vue3中所有页面需要手动刷新一下才能显示，控制台没有报错
kanno的博客
04-23 1169
vue3中所有页面需要手动刷新一下才能显示，控制台没有报错。登录进来是进入首页，然后切换任何页面都是空白，但是控制台没有报错。在其他页面刷新后却能显示，然而切换到首页刷新后再切换到其他页面又是空白。
vue3 路由切换后，页面不显示内容，刷新后正常显示
qq_45469341的博客
05-27 4222
这个白屏问题我是第一次遇到，所以想完整记录一下，本文也借鉴了一下别人的。
解决vue3 路由切换后，页面不显示内容，刷新后正常显示（路由切换白屏的问题）
weixin_43185419的博客
06-13 1万+
正常使用时切换路由都可以正常地切换页面，但是页面长时间无操作就会浮现该问题。使用导航切换路由，路由可以正常跳转，地址栏有变化，但页面不显示。在router-view 中给路由添加key标识。2、切换的各级页面均有根标签节点包裹。
vue页面跳转之后显示空白，刷新之后才显示
2301_77070229的博客
09-25 751
新手第一次用vue，网上搜的很多解决方法和我的情况都不一样。只能一行一行的按照自己的想法看，结果发现关键句中{path:'/businessinfo '}多了一个空格,去掉空格后正常运行。
Vue3切换路由白屏刷新后才显示页面内容
m0_65607651的博客
02-28 1251
Vue3切换路由白屏刷新后才显示页面内容
Vue实现动态路由及登录404页面跳转控制页面刷新空白解决方案.docx
10-26
### Vue实现动态路由及登录404页面跳转控制页面刷新空白解决方案 #### 开发环境配置 本解决方案基于以下开发环境： - 操作系统：Windows 10 - Vue 版本：2.9.6 - Node.js 版本：10.15.3 - 其他依赖库：`js-cookie`...
关于解决vue3嵌套路由跳转后页面路由跳转正常但不走生命周期（白屏）强制刷新后正常
Evi7seve的博客
02-21 226
3 .判断router要跳转的路由组件是否 template标签中 根是否包含多个子元素（如有则将其用一个大标签包裹），其次 tempate根下紧接着是否有代码注释，如有则放到子标签中或删除。：（这个键值每次路由变化时都更新，强制Vue销毁旧的组件实例并创建一个新的实例。组件就会进行完整的重新挂载过程，其内部的数据绑定也会随之更新，从而达到刷新页面的效果）问题：vue3页面跳转成功，且页面路由层级嵌套，router.push跳转后页面白屏，刷新后正常。三步走战略走完，基本解决99的问题！
Vue项目部署在Spring Boot出现页面空白问题的解决方案
12-02
如果Vue项目的`assetsPublicPath`配置为绝对路径`/`，则在刷新浏览器或直接访问子路由时，资源路径将不正确，导致页面空白。 针对这个问题，网上流行的解决方案是将`assetsPublicPath`改为相对路径`./`。这样做的...
Vue-Router路由首次跳转页面空白,刷新页面又可以正常访问
全干攻城狮
05-18 1万+
背景 最近项目过程中出现了一个奇怪的问题，当用户登入系统后部分路由首次跳转时会出现空白页面，但是在该页面上刷新又可以正常显示路由对应的页面。 系统内包含用户、角色、菜单等管理模块，前端使用了动态路由 问题复现 系统内有两个角色，A1和A2 A1角色包含P1、P2、P3页面的权限 A2角色包含P1、P2、P3、P4、P5页面的权限 当首次使用A1角色对应的用户登入系统时，侧边栏所有菜单都可以正常访问 此时退出A1角色对应的用户并使用A2角色对应的用户登入系统，其中P1、P2、P3菜单对应的页面可以正常访问，
解决vue路由发生了跳转但是界面没有任何反应问题
weixin_74285634的博客
12-13 1万+
在vue中，我们使用路由（Router）来实现页面的跳转。但是有时候我们会遇到这样一种问题：点击页面中的导航链接，路由发生了跳转，但是网页的界面没有任何变化。这是什么原因呢？这通常是因为我们的路由跳转没有更新对应的视图（View）导致的。那么如何解决这个问题呢？下面，我将为大家介绍两种解决方案。
Vue路由跳转但显示空白页面
热门推荐
weixin_51173316的博客
08-03 3万+
在router文件下的index.js 中配置了‘Hi’的子路由，但是点击跳转界面却不显示子路由的内容，但是url正常改变。 原因一： 没有在父路由中加上<router-view></router-view>，来将对应的组件内容渲染到router-view。 路由是负责将进入的浏览器请求映射到特定的组件代码中。即决定了由谁(组件)去响应客户端请求。简单说路由就是url地址和对应的资源(组件)的映射，通过一个路径的url地址，可以唯一找到一个资源。 解决方法：在父路由的...
vue3项目路由跳转成功，但是页面空白，刷新一下才能显示（已解决）
JHGYLD7的博客
07-30 3484
原链接：(23条消息) vue 路由跳转页面不刷新_vue路由跳转页面不刷新_咬着拽天下的程序猿的博客-优快云博客困扰我整整一天的问题就这么解决了，谢谢
记录vue-router跳转页面空白问题
Nothingnessdosink的博客
12-19 7437
vue- router里踩坑太多，全记录在这里，持续更新。
vue3路由切换后需要刷新一下页面才能显示内容
m0_51431003的博客
12-02 706
vue3路由切换后需要刷新一下页面才能显示内容
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(&#39;dynamicRoutes&#39;, JSON.stringify(apiRoutes)) ``` 2. **初始化加载路由（关键）** ```typescript // router/index.ts const router = createRouter({...}) // 从缓存加载动态路由 const cachedRoutes = localStorage.getItem(&#39;dynamicRoutes&#39;) 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 &#39;/login&#39; if (!hasLoadedRoutes) { const routes = await fetchRoutes() routes.forEach(route => router.addRoute(route)) localStorage.setItem(&#39;dynamicRoutes&#39;, JSON.stringify(routes)) return to.fullPath // 重定向到原始目标路径 } }) ``` 4. **确保首页静态化（必要前提）** ```typescript // 必须保证首页路由是静态声明 const staticRoutes = [ { path: &#39;/&#39;, component: Home }, { path: &#39;/login&#39;, component: Login } ] ``` ### 二、关键配置项 1. **404处理策略** ```typescript // 必须放在最后声明 { path: &#39;/:pathMatch(.*)*&#39;, component: NotFound, meta: { isDynamic: true } } ``` 2. **白屏防护措施** ```typescript // main.ts router.isReady().then(() => { app.mount(&#39;#app&#39;) }) ``` ### 三、优化方案 1. **路由缓存更新机制** ```typescript watch(router.getRoutes(), (newVal) => { localStorage.setItem(&#39;routeCache&#39;, JSON.stringify(newVal)) }, { deep: true }) ``` 2. **路由加载状态管理** ```typescript let isRouteLoaded = false router.beforeEach((to) => { if (!isRouteLoaded && to.path !== &#39;/login&#39;) { return { path: &#39;/loading&#39; } // 添加过渡页面 } }) ``` [^1][^2][^3]
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值