如何在页面卸载前修改站点URL 避免刷新触发404错误

为什么不推荐用window.onbeforeunload实现需求 #

这个事件的设计初衷是拦截用户误操作离开页面（比如未提交的表单丢失场景），现代浏览器对这个事件的权限做了严格限制：

• 不允许在事件回调内自定义跳转目标地址，所有主动跳转的逻辑都会被浏览器直接拦截
• 事件触发时浏览器已经进入页面卸载流程，哪怕写入跳转逻辑，也大概率会被刷新流程打断，最终效果不稳定

完全不适合用来实现“刷新时跳转回主站”的需求。

两种常规落地路径 #

路径1：最小改动的前端Hash路由方案 #

当前动态修改URL的模式属于单页应用的History路由模式，路径内容会被完整发送给服务端，因为没有对应静态文件才会触发404。
如果不想调整服务端配置，可以直接把路由切换为Hash模式：动态修改URL时在路径前加#，最终的URL形式为https://a.website.com/#/home、https://a.website.com/#/changelog。
这种模式下#之后的内容属于浏览器端锚点，不会随请求发送给服务端，无论用户在哪个标签页触发刷新，服务端收到的请求永远是指向根路径https://a.website.com，完全不会触发404。

路径2：保留现有URL格式的服务端配置方案 #

如果不想让URL中出现#，只需要在站点托管的服务端/静态平台上配置路径重写规则即可：

• 把所有前端动态生成的路由路径（比如/home、/changelog）全部重定向指向根目录的index.html主站文件
• 规则触发后，浏览器拿到的永远是主站的页面资源，前端脚本再根据当前URL路径匹配对应的标签页内容展示
  这种方案是History路由的常规实现方式，不仅不会出现404，用户直接分享当前标签页的URL给其他访客时，对方打开也能直接看到对应内容，体验远好于刷新强制跳回首页的逻辑。

强制刷新回主站的稳定实现方式 #

如果你的需求是无论当前停留在哪个标签页，只要触发刷新就必须回到https://a.website.com主站，完全不需要借助window.onbeforeunload：

• 在单页应用脚本的最入口位置加一段路径判断逻辑：页面加载时如果检测到当前路径不是根路径/，直接调用window.location.replace('https://a.website.com')完成跳转
• 这种逻辑是在页面加载最早期运行的，不受浏览器弹窗、拦截规则的限制，兼容性和稳定性远高于基于onbeforeunload的 hack 写法。

内容的提问来源于stack exchange，提问作者Reed Thorngag