解决window.history.back()返回上一页需多次点击及缓存不刷新问题

作者:霁月

时间:2026-10-31

浏览:81

本文针对window.history.back()返回时需多次点击及页面数据不刷新的问题,分析了浏览器历史状态与缓存机制的影响。通过结合location.reload()或window.location.replace()等方法,实现了返回上一页时强制刷新数据的效果,解决了因缓存导致的旧数据显示问题,提供了多种代码解决方案供参考。

文章目录

window.history.back() 方法在返回上一页时,有时需要用户点击多次才能回到目标页面。

在此记录两个遇到的常见问题。

为什么 window.history.back() 返回上一页时,有时需要点击多次?

原因在于 Windows 环境下的 window.history.back() 后退操作返回的不仅仅是前一个页面,而是前一个页面的状态。如果在一个页面中进行了 3 次修改,那么必须后退 3 次才能回到初始的前一个页面状态。

如何处理这种情况?我在网上搜索了一下,并没有找到完全契合当前情况的方案。常见的建议是编写具体的跳转地址,但如果我能知道具体地址,也就无需为此纠结了。

经过各种测试和实际操作,以下是有效的代码方案。

下面展示一些内联代码片段。

history.back();location.reload();
window.history.back()

这意味着先刷新页面以清除状态,然后再执行返回上一页的操作,从而完美解决该问题。

这是一篇随笔记录,因为之前使用过这个功能,但隔了两三年未用便忘记了,费了一番功夫才查到,确实有些尴尬。

// 先是变量名字
data() return {
	value1: 'a',
	value2: 'b',
	value3: 'c'
}
//那么怎么循环给他们赋值呢 就是这样咯
this['value'+i] = value;

window.history.back(); 缓存返回上级页面不刷新数据

我们经常在完成某个操作后返回上一个页面,例如新增完一条记录后返回。

我们希望返回上一个页面时,该页面能自动刷新。

然而,由于 JavaScript 的缓存机制,

导致数据仍然从上一次请求中获取(其初衷是为了让用户获取更快、节省资源)。

但这与我们的实际需求不符。

如图所示:

window.history.back() 方法在返回上一页时,有时需要用户点击多次才能回到目标页面。

探索过程

从网上查找的一些资料:

在 window.history.back(); 后面添加 location.reload();

window.history.go(-1);window.location.reload()

结果均无终而返,未能解决问题。

解决方案

window.location.replace(document.referrer)
window.location.href=“上一个页面URL”

(下下策)

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章