vue动态添加路由后刷新失效问题

最新推荐文章于 2024-05-16 11:28:42 发布
最新推荐文章于 2024-05-16 11:28:42 发布
阅读量3.1k 收藏 12
点赞数 2
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48309048/article/details/128250397
版权

        当添加路由addRoutes的时候，正常点击是没问题的，但是刷新一次页面，那么动态添加的路由就会失效，

        用getRoutes() 打印出来看的时候确定路由已经添加进去了，所以这个原因应该是

        当你执行到addRoutes时，路由要添加进去了，但是，路由不是响应式的，从执行循序来看，地址栏快于路由的添加，那找不到这个路径了就只能白屏了，除非设置了404的页面

那么怎么解决这个问题， 只需要再进行一次拦截就好了，代码如下：

 实测过，这样已经解决刷新页面空白的问题了，

同学们可以参考一下，具体问题还是要具体分析

还有多远.
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
vue动态添加路由后刷新页面白屏问题
weixin_47673864的博客
06-10 3625
页面刷新白屏其实是因为vuex引起的，由于刷新页面vuex数据会丢失，所以动态添加路由这一步也就失效了在通过vuex中的state属性存储路由在sessionStorage中，只是存储了左侧菜单栏展示的信息path地址，但是并没有存进去路由详细信息，比如name，meta值，利用vue插件即可看到本地route里面的真实数据！所以；只需要添加路由守卫，在每次页面刷新的时候都来判断是否添加的动态路由【这里设置一个变量记录是否添加的布尔值】，如果为false，即再次执行一遍添加动态路由的过程即可next（） 在
真正有效解决vue addRoute动态添加路由后刷新页面白屏的靠谱方法及思路，切实可行！
qq_37150410的博客
11-24 1万+
Vue3动态路由刷新后失效真正可行的解决方案！
vue 解决addRoutes动态添加路由后刷新失效问题
08-27
主要介绍了vue 解决addRoutes动态添加路由后刷新失效问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue-router添加动态路由及无限刷新白屏和添加不生效问题_router(4)
最新发布
2401_84434331的博客
05-16 425
为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】})} else {== -1) {next()} else {next(/login?})})},## 问题二：addRouters()不生效> 执行完addRouters()后，我查看了store里的routes，已经有将动态路由添加进去，但是菜单中还是没有显示。
vue3动态路由+页面刷新丢失路由+再次加载路由
m0_66879773的博客
03-14 2748
注：这里会衍生出一个问题，第一次登录的时候，路由信息没加进去，会跳404，所以这里需要做一个判断，判断路由to.matched这个去哪里的路由信息数组有没有数据，没有就再次添加动态路由信息，还有这块需要添加一个全局标识isAddAgain是否需要重新加载路由。动态路由添加后，每次刷新页面空白，这是因为刷新后路由守卫没再次走一遍，这里就需要在App.vue里面做判断，重新添加路由信息并跳转刷新前路由。目前路由只有静态的页面，我们需要做动态路由，需要在路由守卫router.beforeEach中添加。
vue-router路由参数刷新消失的问题解决方法
08-30
vue-router路由参数刷新消失的问题解决方法 路由参数刷新消失的问题解决方法是 vue-router 中常见的问题，本篇文章将为您提供四种解决方案。 解决方案一：Session & 服务器渲染 传统的解决方案是使用 Session 和...
vue 解决addRoutes多次添加路由重复的操作
10-14
5. **处理刷新失效问题**： 当页面刷新时，存储在浏览器内存中的数据（如Vuex的状态）会丢失。为了避免动态添加的路由失效，可以在`beforeEach`导航守卫中检测是否存在存储的权限列表。如果不存在，说明是页面刷新...
解决vue router组件状态刷新消失的问题
12-09
在开发基于Vue.js的单页应用（SPA）时，经常遇到的一个问题是，用户登录后通过Vue Router跳转到主页面，但当用户刷新页面时，登录状态和相关信息丢失。这是因为浏览器刷新页面时，路由参数、Vuex状态等不会被保留。...
vue3 关于动态路由刷新出现空白页最优解
qq_40315210的博客
03-21 5196
递归调用：next({ …to, replace: true });（慎用，如果你的后台管理table是带标签会有问题，没有放对位置会死循环）原因：刷新页面的时候动态路由会刷新掉，然后动态路由会重新加载，解决办法：递归再调用beforEach，或者直接跳回首页。
vue中解决动态路由加载，刷新页面出现路由重复添加/出现空白页的问题
hahaha_1314的博客
03-25 8802
vue动态路由刷新页面后出现问题的处理
vue-router添加动态路由及无限刷新白屏和添加不生效问题_router(1)
2301_82244607的博客
04-29 1039
疯狂编程学习效果可视化写博客阅读优秀代码心态调整。
vue+router路由跳转不起作用的一项原因
热门推荐
oXiangZuoZuo12345的博客
08-01 2万+
Vue.use(Router) export default new Router({ mode:'history', routes: [ { path: '/', component: Login }, { path: '/login', component: Login }, { path: '/register',component: Registe...
Vue 动态添加的路由页面刷新时失效的原因及解决方案
weixin_53035812的博客
08-13 4445
本文为搬运学习,感谢原文大佬，原文地址:https://www.jb51.net/article/206376.htm Vue2 问题描述 昨天在做vue后台管理系统有关权限页面动态添加到路由的功能时，遇到一个问题：动态添加的路由页面，在页面刷新时出现了404的情况。 场景 后台管理系统的权限控制是通过在前端页面定义权限code， 把code给后台同学保存配置到表中，之后根据后台返回的权限code列表与前端页面配置的code菜单列表做筛选匹配，code相等的页面就是有权限的页面，再通过rout
vue3+ts+vite实现动态路由（包括解决刷新页面路由丢失）
qq_44928780的博客
12-01 2762
vue3+ts+vite实现动态路由（包括解决刷新页面路由丢失）
vue-router 使用 addRoutes 动态添加路由跳转后页面刷新空白问题
weixin_43299180的博客
03-03 1万+
问题描述： 在做菜单权限的时候，使用了 router.addRoutes() 方法把不同权限获取到的路由表动态的添加到路由里面去。菜单正常展示，在点击菜单跳转之后，浏览器刷新一下，页面没有跳转到 404 页面，而是变成了空白。 问题原因： addRoutes 和 vuex 一样，在浏览器刷新后数据会丢失，因为刷新页面 Vue 会重新实例化，路由也会恢复到初始路由。 解决方案： 在页面刷新之后重新获取到通过权限修改后的路由表，然后再次使用 router.addRoutes() 方法将新路由表动态添加到路由里面
vue的动态路由，防止addRoutes无限添加，以及F5刷新不消失，第一次加载不消失
beichen3997的博客
03-04 4057
一 login.vue // 用户登录 handleLogin(nameForm) { this.$refs[nameForm].validate(valid => { // 数据传递的规则验证 if (valid) { let smt= dataRoutes; // const _this=...
Vue动态路由配置，f5刷新动态路由丢失等图文详解
DoLi_JIN的博客
05-28 3060
Vue动态路由配置，f5刷新动态路由丢失，路由重定向报Promise的错误----------------其实超级简单 业务流程 用户登录（获取token） 得到用户token后，可以携带token（如果不需要token，请略过此步骤）请求动态路由接口 重点：动态路由数组存在本地 栗子： // 用户登录 PostUserToken(data) .then( response => { //设置token this.$cookie.set('acce.
vue2刷新页面后动态路由没有了
07-28
回答: 当使用vuex持久化插件时，刷新页面后动态路由会丢失。这是因为在刷新页面时，路由不是响应式的，导致找不到之前添加的动态路由而出现空白页面。解决这个问题的方法是在main.js中的new Vue()中加入created()钩子函数，并将创建动态路由的方法放在其中。这样在刷新页面时，会重新执行创建动态路由的方法，解决了动态路由丢失的问题。另外，还可以通过在router.beforeEach()中进行拦截来解决刷新页面后动态路由丢失的问题。具体的代码实现可以参考引用\[2\]中的示例代码。 #### 引用[.reference_title] - *1* [vue2动态路由刷新页面空白](https://blog.csdn.net/weixin_42821697/article/details/126421090)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [vue动态添加路由后刷新失效问题](https://blog.csdn.net/weixin_48309048/article/details/128250397)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [关于Vue刷新后丢失动态路由](https://blog.csdn.net/weixin_42652039/article/details/127957451)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值