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

已于 2024-01-02 11:38:49 修改
阅读量4k 收藏 22
点赞数 13
分类专栏： 前端 IT 技术分享 文章标签： 前端 javascript vue.js 前端框架
于 2024-01-02 10:15:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48256948/article/details/135333646
版权
本文讲述了作者在使用Vue3时遇到的动态路由刷新后丢失问题，通过console.log追踪发现与路由守卫有关。解决方案是调整获取动态路由的方式，使用async/await确保在注册路由之前完成数据获取，从而避免刷新时的空白页面问题。

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

1.新年的第一天，作为一个刚用VUE3的菜鸟程序员遇到了一个获取用户权限动态路由的问题，如果不跳转刷新页面路由都能正常使用，但是一刷新页面通过  router.addRoute()添加的路由就会缺失，并且报路由找不到的警告。

 

 2.程序员快速解决bug的方法就是找度娘，但是这次度娘好像不给力了，我看到大多数大佬说的就是添加next({...to,replace: true})，我这里也是直接CV大法看问题解决了吗，结果发现还是不行，只要在动态路由上刷新页面就会变成空白页

 

 3.所以我们这采用常规解决问题的办法  console.log()，看看问题出现在什么地方，我发现控制台警告是比我打印前面的，而我打印是在路由守卫打印的，所以那么我们看看哪些地方引用了路由守卫，我的只有入口文件main.js，那么问题应该找到了在main.js中，如有我们在打印一下验证一下猜想。发现确实如此

 

 

 

4.现在我们来看看怎么解决呢， 我的办法就是用async和await调用一次获取动态路由的接口，因为我觉得这个问题应该是在获取动态路由前，vue就把先把路由给注册了所以获取不到，

 

 

5,现在我们看看问题解决了，能在动态路由刷新页面不出现空白页面或者动态路由没有的情况了，感谢看到这里的小伙伴，这是我第一次写文章因为看到度娘上没解决到我的问题，我自己解决了就分享出来看有没有遇到和我同样问题的，我出来工作才半年肯定有什么地方说的不对还请指正，最后麻烦一键三连，如果需要整个动态路由实现的方法也可以私信我，多的发我就发一个完整版的，谢谢

 

vue3动态路由+页面刷新丢失路由+再次加载路由
m0_66879773的博客
03-14 7056
注：这里会衍生出一个问题，第一次登录的时候，路由信息没加进去，会跳404，所以这里需要做一个判断，判断路由to.matched这个去哪里的路由信息数组有没有数据，没有就再次添加动态路由信息，还有这块需要添加一个全局标识isAddAgain是否需要重新加载路由。动态路由添加后，每次刷新页面空白，这是因为刷新后路由守卫没再次走一遍，这里就需要在App.vue里面做判断，重新添加路由信息并跳转刷新前路由。目前路由只有静态的页面，我们需要做动态路由，需要在路由守卫router.beforeEach中添加。
vue动态添加路由后刷新页面白屏问题
weixin_47673864的博客
06-10 4479
页面刷新白屏其实是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了在通过vuex中的state属性存储路由在sessionStorage中，只是存储了左侧菜单栏展示的信息path地址，但是并没有存进去路由详细信息，比如name，meta值，利用vue插件即可看到本地route里面的真实数据！所以；只需要添加路由守卫，在每次页面刷新的时候都来判断是否添加的动态路由【这里设置一个变量记录是否添加的布尔值】，如果为false，即再次执行一遍添加动态路由的过程即可next（） 在
关于Vue3动态添加路由后，刷新页面路由丢失的解决
fangzexinhuanan的博客
03-03 637
关于Vue3动态添加路由后，刷新页面路由丢失的解决
vue3 动态路由及使用动态路由后刷新界面出现空白页或者404
AKindofo的博客
03-11 5970
vue3 动态路由刷新404或者空白
vue3实现动态路由
最新发布
i_am_a_div的博客
03-25 1552
vue3实现动态路由
vue3 关于动态路由刷新出现空白页最优解
qq_40315210的博客
03-21 6106
递归调用：next({ …to, replace: true });（慎用，如果你的后台管理table是带标签会有问题，没有放对位置会死循环）原因：刷新页面的时候动态路由会刷新掉，然后动态路由会重新加载，解决办法：递归再调用beforEach，或者直接跳回首页。
Vue3中使用vue-router刷新获取动态路由时页面丢失的问题
weixin_40389330的博客
07-26 2315
vue3中关于页面刷新动态路由组件消失的问题
解决Vue3动态添加路由后刷新白屏的问题
白的夜的博客
07-19 4404
使用router.addRoute()动态添加路由后正常点击没问题，一刷新就白屏。原因：路由守卫放行的时候，动态路由组件还没有渲染完毕。
解决vue3，动态添加路由，刷新页面出现白屏或者404
weixin_65363325的博客
11-29 4021
在做毕设的时候，在权限路由得到时候，我问通过router**.**addRoute(item)的方式，在路由守卫动态添加路由刚开始没什么问题，页面的都能正常显示，网络请求也能发送，后来出现了刷新页面，跳转到404解决方法提取出404代码片段追加到处理好的权限列表的末尾我项目采用的vue-router是4.3.3版本。
Vue下路由History模式打包后页面空白的解决方法
08-27
Vue下路由History模式打包后页面空白的解决方法 在 Vue 项目中，默认的路由模式是 Hash 模式，但是这种模式会带来一些问题，如 URL 中的 "#" 符号不美观，微信分享、授权登录等功能也会出现一些问题。 History 模式...
vue 项目中当访问路由不存在的时候默认访问404页面操作
01-19
在Vue项目中，当访问的页面路由不存在或错误时，页面显示为一片空白。然而，通常我们需要对访问url不存在或者错误的情况下添加默认的404页面，即not found页面。 一般的处理方法是： 在最后添加一个path: * ，优先级...
vue-router3.0版本中 router.push 不能刷新页面的问题
11-30
在 github 的 vue-router 中找到同样的一个问题：3.0.1版本通过router实例无法跳转 昨天发现有些路由不能正常跳转，找了一下发现都是那些实例化后使用 router.push 而不是直接使用 this.$router.push 的地方。 出现的情况是 router.push 后，url变化了，但是页面没有刷新，手动刷新一下才出现应有的画面。 我看了一下 package.json，我的 vue 和 axios 是没有写版本号，但 vue-router 明明写了版本号，怎么可能以前行的，现在就不行了呢？ 然后，我使用 npm view vue-router 查看后才发现使用的
在vue中实现某一些路由页面隐藏导航栏的功能操作
10-14
在Vue.js应用中，我们经常需要...总结起来，本文详细阐述了在Vue中隐藏某些路由页面的导航栏以及保持路由刷新后菜单项激活状态的方法。理解并掌握这些技巧，有助于我们更好地构建具有动态导航和局部刷新功能的Vue应用。
vue3 使用addRoute动态添加路由，页面刷新就白屏解决办法
濮家大少
12-22 2183
vue3 使用addRoute动态添加路由，页面刷新就白屏解决办法
vue3动态路由刷新后空白或者404
qq_45555960的博客
06-09 3779
在使用beforeEach 进行拦截路由采用动态路由时，页面刚初始化时路由正常跳转但页面刷新后出现空白或者404。通过后端拿到路由数据，遍历路由数据通过router.addRoute一个个的添加，同时将路由数据通过。x缓存起来，当页面刷新时，从缓存里拿出路由数据再重新添加，同时配合路由守卫来跳页面。时动态添加的路由已经被完全加载上去，一般是与添加动态路由时配合使用。刷新页面后动态添加的路由页面空白。逻辑不当的情况下，很容易死循环。
vite vue3 vue-router 动态加载菜单，解决浏览器刷新后界面空白问题
dugucike的专栏
04-19 2494
app.use(store) //再加载store,vuex中的store刷新后清空，否则把菜单放store里面也可以，如果使用vuex持久化插件，router和store的加载顺序得改过来。//进入路由守卫生再加载一次，因为路由间的转向不整体刷新网页，不执行上面的全新加载函数，比如，登陆前，本地前没有存放菜单数据，登陆后还未执行菜单数据拉取，这时候菜单可能为空。//加载菜单,验证是否登陆，登陆则发送加载菜单请求，否则不发送。//如刷新，重新从localstorage加载菜单。//从本地菜单数据加载菜单。
踩坑记录（vue3路由跳转，路径改变了但是页面还是空白）
m0_62956518的博客
07-15 431
部分原因：在template标签内部写了注释，猜测原因，template标签内部只能有一个一级标签，但是加了注释之后会将注释也识别为标签，所以跳转成功但是页面还是显示空白的，该原因在控制台不会报错。
vue3动态路由刷新后失效
why_so_serious__的博客
08-03 1003
添加动态路由后，能够访问该路由，但是刷新页面后，出现了匹配不到该路由的问题。
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]
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值