vue3 动态添加路由刷新后页面丢失(白屏)问题

最新推荐文章于 2024-09-29 16:01:25 发布
最新推荐文章于 2024-09-29 16:01:25 发布
阅读量5.3k 收藏 11
点赞数 9
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45736656/article/details/129400394
版权
动态添加路由通常使用Vuex或Pinia进行封装，在登录时调用。若刷新后丢失，可能是因为状态管理库未做持久化，或者main.ts中未再次调用。需确保在页面挂载和路由配置前执行添加，避免路由信息丢失，无需路由守卫也可实现。
摘要由CSDN通过智能技术生成

动态添加路由操作一般是用vuex或者Pinia封装，在登录页面调用

如果出现刷新页面丢失有两种可能：

1：vuex或者Pinia没有做持久化处理

2：动态添加路由需要在main.ts里面也调用一次

不需要路由守卫即可实现

注意：必须要在页面挂载前还有路由配置完成前调用添加，不然还是丢失

 

 

白毛伦
关注
vue动态添加路由后刷新页面白屏问题
weixin_47673864的博客
06-10 4069
页面刷新白屏其实是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了在通过vuex中的state属性存储路由在sessionStorage中，只是存储了左侧菜单栏展示的信息path地址，但是并没有存进去路由详细信息，比如name，meta值，利用vue插件即可看到本地route里面的真实数据！所以；只需要添加路由守卫，在每次页面刷新的时候都来判断是否添加的动态路由【这里设置一个变量记录是否添加的布尔值】，如果为false，即再次执行一遍添加动态路由的过程即可next（） 在
vue3 路由的使用
热门推荐
m0_49515138的博客
02-03 2万+
name 是路由的名称，非必填，但是一般都会配置上去，这样可以很方便的通过 name 来代替 path 实现路由的跳转，因为像有时候的开发环境和生产环境的路径不一致，或者说路径变更，通过 name 无需调整，但如果通过 path，可能就要修改很多文件里面的链接跳转目标了。所以 Vue 在 Webpack 的代码分割功能的基础上，推出了 异步组件，可以把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样按需载入，很方便的实现路由组件的懒加载。
vue 解决addRoutes动态添加路由后刷新失效问题
08-27
主要介绍了vue 解决addRoutes动态添加路由后刷新失效问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决VUE3+Pinia存储的数据在页面刷新后丢失问题
最新发布
qq_48812041的博客
09-29 642
使用浏览器的本地存储（localStorage 或 sessionStorage）进行数据持久化使用第三方库进行状态管理持久化。使用库，安装后可以很方便地实现数据持久化。安装并在sotre使用插件在需要持久化的store中添加persistcount: 0,age:30}),persist: true, // 整个状态都进行持久化// 或者// paths: ['count'], // 只持久化 count 属性// },});在使用库时，persist选项中的key和。
Vue3中使用vue-router刷新获取动态路由时页面丢失的问题
weixin_40389330的博客
07-26 1464
vue3中关于页面刷新动态路由组件消失的问题
vue3动态路由+页面刷新丢失路由+再次加载路由
m0_66879773的博客
03-14 4960
注：这里会衍生出一个问题，第一次登录的时候，路由信息没加进去，会跳404，所以这里需要做一个判断，判断路由to.matched这个去哪里的路由信息数组有没有数据，没有就再次添加动态路由信息，还有这块需要添加一个全局标识isAddAgain是否需要重新加载路由。动态路由添加后，每次刷新页面空白，这是因为刷新后路由守卫没再次走一遍，这里就需要在App.vue里面做判断，重新添加路由信息并跳转刷新前路由。目前路由只有静态的页面，我们需要做动态路由，需要在路由守卫router.beforeEach中添加。
vue3_动态添加路由,以及路由刷新后页面丢失问题
2201_75783276的博客
09-11 1904
接着在router文件夹index.js中引入store中的权限数据，并导出一个方法，判断权限当中的数据，并跟roleEnum路由规则匹配，匹配上之后则addRoute()刷新之后，动态路由会消失。是因为路由重新刷新了，store中的数据也重新刷新，在main.js中引入这个方法，调用一次，记得要在router use前把路由匹配好。在登录之后调用这个方法，动态路由就匹配成功了。首先，是要将权限数据本地持久化存储。
关于Vue刷新后丢失动态路由
gao_wg的博客
11-21 8500
页面刷新，动态路由丢失
基于vue 动态菜单 刷新空白问题的解决
10-14
动态注入路由时，有时会出现白屏现象，只有在刷新页面后才显示。这通常是由于在路由守卫中动态获取并注入路由导致的。解决方案是在用户登录后立即执行动态添加路由的代码，如下所示： ```javascript // 获取用户...
详解解决Vue相同路由参数不同不会刷新的问题
10-17
综上所述，对于Vue相同路由参数不同不会刷新的问题，推荐使用动态key值的方法来确保组件能被正确刷新。虽然这种方法可能会对性能造成一定影响，但在大多数情况下能够有效解决问题。同时，我们也应该合理利用Vue ...
vue路由history模式刷新页面一片空白，也不报错（解决方案）
Z.Dragon 的博客
11-07 1万+
如果项目不在根目录下，路由需添加配置(base) router/index.js mode: 'history', base: '/h5/', config/index.js build assetsPublicPath: '/h5/', 后台配置代码：引用链接 END. ...
Vue3动态路由页面刷新找不到路由空白页面
qq_48256948的博客
01-02 3603
1.新年的第一天，作为一个刚用VUE3的菜鸟程序员遇到了一个获取用户权限动态路由的问题，如果不跳转刷新页面路由都能正常使用，但是一刷新页面通过 router.addRoute()添加的路由就会缺失，并且报路由找到的警告。 2.程序员快速解决bug的方法就是找度娘，但是这次度娘好像不给力了，我看到大多数大佬说的就是添加next({...to,replace: true})，我这里也是直接CV大法看问题解决了吗，结果发现还是不行，只要在动态路由上刷新页面就会变成空白页 3.所以我们这采用常规解决问题的办法
vue3 vite pinia 配置动态路由、解决刷新页面路由消失问题
jierleijiajia的博客
09-05 4238
1，需要在静态路由的基础上用vue路由上面的addRoute()方法来动态添加路由，最后生成我们需要的路由。上面只是在登陆时候添加了路由，点击刷新页面后会消失，需要在main.js中配置一下。2，封装添加路由的方法，在刷新页面时重新生成路由。
vue2+vue-router动态路由添加及路由刷新后消失的解决办法
weixin_44166849的博客
06-06 3938
vue-router动态路由添加及路由刷新后消失的解决办法
vue3 动态路由及使用动态路由后刷新界面出现空白页或者404
AKindofo的博客
03-11 4264
vue3 动态路由刷新404或者空白
vue动态路由刷新丢失解决方案
BLUESKYHOST的博客
11-17 8642
问题出现的问题 动态路由添加刷新页面出现空白页面或者404页面 因为界面刷新导致动态路由丢失，所以是空页面或者404 我添加动态路由了怎么还剩刷新依旧是空白页面呢？ 因为动态路由添加后需要是新导航才会生效 解决方案 需要判断当前页面是否刷新了 本地存一个当前访问页面的路由下次刷新用来判断当前是否是页面刷新 使用vuex来存储动态路由数据，如果是空就是刷新页面了 案例 使用本地存储 使用路由拦截器跳转之后存数据 //存访问路由 router.afterEach((to, from) =
vue3 关于动态路由刷新出现空白页最优解
qq_40315210的博客
03-21 5649
递归调用：next({ …to, replace: true });（慎用，如果你的后台管理table是带标签会有问题，没有放对位置会死循环）原因：刷新页面的时候动态路由会刷新掉，然后动态路由会重新加载，解决办法：递归再调用beforEach，或者直接跳回首页。
Vue-admin-template设置动态路由刷新后丢失显示空白页面
m0_62626558的博客
04-24 586
在判断用户角色存在时还需要判断路由初始化的长度，比如我设置的constantRoutes静态路由数量为3，而动态路由的长度是12，页面一刷新就会导致路由的长度变为3，所以我们要加上路由长度判断条件，如图所示。在src/permission.js中修改一行代码。
ruoyi+vue-router动态路由刷新后页面消失的解决办法
weixin_65465925的博客
07-25 966
解决vue+ruoyi动态路由页面刷新页面空白问题，亲测有用
vue动态路由刷新后白屏
02-06
当使用Vue动态路由刷新后出现白屏的情况，可能是因为以下几个原因： 1. 路由配置问题：请确保你的路由配置正确无误。检查路由的路径、组件是否正确配置，并且确保动态路由参数能够正确传递。 2. 缓存问题：Vue默认会对组件进行缓存，当路由切换时，如果组件已经被缓存，不会重新渲染。这可能导致在动态路由刷新后出现白屏。你可以尝试在路由配置中设置`<router-view>`的`key`属性，以强制重新渲染组件。 3. 异步加载问题：如果你使用了异步加载组件的方式（如使用`import()`），请确保异步加载的组件路径正确，并且能够正确加载。 4. 数据加载问题：如果你在组件中有异步请求数据的操作，可能是因为数据加载失败导致页面出现白屏。你可以在数据加载失败时进行错误处理，或者使用loading状态来避免页面空白。 5. 其他问题：如果以上方法都没有解决问题，可能是其他原因导致的。你可以尝试在浏览器的开发者工具中查看控制台输出，以便找到具体的错误信息。 希望以上解答对你有帮助！
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值