window.location.reload(true) 在现代浏览器中已失效,因W3C未定义该参数且各浏览器陆续移除支持;实际加载行为完全由HTTP缓存头(如Cache-Control、ETag)控制,无法通过此方法强制绕过缓存。

window.location.reload() 不能真正“强制”从服务器重新加载页面,传 true 参数在所有现代浏览器(Chrome、Firefox、Edge、Safari)中已被忽略,实际效果和不传参完全一致。
为什么 location.reload(true) 不再起作用
早期 Netscape 和 IE 支持该参数跳过缓存,但 W3C 标准从未定义它,主流浏览器在近年陆续移除了对该行为的支持。现在无论传 true 还是 false,浏览器都严格按响应头中的 Cache-Control、ETag 等字段决定是否发新请求。
- 即使你写了
location.reload(true),HTML、JS、CSS 仍可能从内存或磁盘缓存直接加载 - 服务端若返回
Cache-Control: public, max-age=3600,reload 后照样走缓存 - 开发工具里看到“from cache”或“disk cache”,就是这个机制在起作用
想确保拿到最新 HTML,得改 URL 或清缓存逻辑
靠 JS 单次调用 reload() 无法绕过 HTTP 缓存层级。真正可控的方式是让浏览器认为这是“一个新请求”:
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 用时间戳拼接查询参数:
window.location.href = window.location.origin + window.location.pathname + window.location.search + (window.location.search ? "&" : "?") + "t=" + Date.now() - 用
location.replace()避免历史栈堆积:window.location.replace(window.location.href + "?t=" + Date.now()) - 配合服务端设置响应头:
Cache-Control: no-cache, must-revalidate或max-age=0,让浏览器每次发If-None-Match验证
Vue 项目里别盲目 reload,先看是不是路由组件问题
很多所谓“需要强制刷新”的场景,其实是 Vue Router 组件复用导致的——比如菜单栏没更新、表单残留旧数据。这时 window.location.reload() 是重锤砸核桃:
-
this.$router.go(0)会触发当前路由组件的beforeRouteUpdate,但不会销毁实例,状态还在 - 更推荐用
:key强制重装组件: - 或者用
this.$router.replace({ path: this.$route.path, query: { ...this.$route.query, t: Date.now() } })触发组件重建
真正需要整页 reload 的情况极少,比如登录后清除全部 localStorage + session + 路由状态;但即便如此,也要注意 reload() 会中断所有未完成的 fetch 请求,且无法保证第三方 SDK(如埋点、监控)的清理完整性。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










