当前位置: 首页 > 知识库问答 >
问题:

前端 - Vue 项目刷新页面 #/ 之后的地址丢失怎么办?

何建中
2024-03-08

如题:
刷新页面之后有概率 #/ 之后的地址消失,
1.token 保活没问题,token 过期的提示都在
2.和缓存无关,clear site data 之后刷新页面,提示 无token
3.没有除外 JS 代码的重定向,debugger 开了也没用
4.概率性出现,无痕浏览器里面也不影响
5.和单个电脑无关,多台电脑都能复现

复现条件:
1.单个账号登录 1H+ 无操作,可以提升触发 BUG 的概率

共有2个答案

朱宏爽
2024-03-08

按照问题描述中的 2, 5 两条,基本上可以判断是你的业务代码出现了问题。
但是没有办法看到具体的项目代码,所以只能建议从一下两个位置着手:

  1. 检查路由守卫
  2. 检查权限判断相关的业务代码

虽然HTTP服务也有可能,但是我认为大概率不会是这个。


按照补充的复现条件,建议是完成登录之后,在 DevTools 中修改 storage 中的 token,看看是否稳定复现。

至于测试环境没问题,正式环境有问题,可能是由于token过期时间设置的原因。

慕嘉茂
2024-03-08

从浏览器的角度来说,刷新应该不影响 hash(#/)。

所以大概率还是你的代码包含了自动跳转的功能,并且在一段时间后有大概率会触发。

可以考虑的方案:

  1. 只做一个简单的 html,验证你的浏览器刷新会不会影响 hash
  2. 我猜应该没影响。接下来可以用全局路由守卫找到更新的原因。
  3. 然后解决这个问题
 类似资料:
  • 本文向大家介绍页面刷新后vuex的state数据丢失怎么解决?相关面试题,主要包含被问及页面刷新后vuex的state数据丢失怎么解决?时的应答技巧和注意事项,需要的朋友参考一下 监听浏览器刷新前的事件,在浏览器刷新之前就把vuex里的数据保存至sessionStorage中,刷新成功后如果异步请求的数据还没返回则直接获取sessionStorage里的数据,否则获取vuex里的数据。

  • uniapp项目如何监听页面刷新

  • 本文向大家介绍vue项目刷新当前页面的三种方法,包括了vue项目刷新当前页面的三种方法的使用技巧和注意事项,需要的朋友参考一下 想必大家在刨坑vue的时候也遇到过下面情形:比如在删除或者增加一条记录的时候希望当前页面可以重新刷新或者如下面这种: 如果希望点击确定的时候,Dialog 对话框关闭的时候,当前http://localhost:9530/#/supplier/supplierAll页面可

  • 怎么强制用户刷新页面? 今天遇到一个问题,是一个公众号上面的项目,修改了一个问题,但是需要用户刷新才能看到效果?用什么技术可以实现?无论是小程序,公众号还是h5,只要我上传了修改过的代码,就可以让用户直接看到效果,不管用户是否强制刷新? 无论是小程序,公众号还是h5,只要我上传了修改过的代码,就可以让用户直接看到效果,不管用户是否强制刷新?

  • 本文向大家介绍vuex页面刷新后数据丢失的方法,包括了vuex页面刷新后数据丢失的方法的使用技巧和注意事项,需要的朋友参考一下 1. 原因 (1)js代码是运行在内存中的,代码运行时的所有变量、函数都是保存在内存中。 (2)刷新页面,以前申请的内存被释放,重新加载脚本代码,变量要重新赋值。 (3)要想刷新后数据不丢失就必须把数据存储在外部,例如:Local Storage、Session Stor

  • 当用户成功登录时,它将身份验证状态从null变为true,并且在登陆主页后,当我刷新页面时,它将初始化状态(authstate.js)设置为默认状态值,我希望即使在用户刷新页面后也能保持该状态。我使用的是hooks reducer login.js authstate.js 这是initialstate代码 导出默认的AuthState; authreducer.js这是reducer钩子代码导入