一起来聊聊 Router.replace 后跟 Reload，为什么页面会循环刷起来？

你是不是也遇到过这种情况：先给路由改个 URL，马上又刷新一次页面然后又回到原来的 URL，像是被绑在了无尽的循环里？这玩意儿本来想解决一次性参数后刷新页面让新状态生效，可结果变成了“刷到停不下来”。别急，我来帮你拆解。

js router.replace}`); router.reload;

第一行是框架的软导航。它把新的 URL 放进一个异步队列，等后面再执行。第二行嘛，是浏览器的硬刷新——同步立即触发。

关键点是：软导航并不是立刻改完地址栏，而是等到下一次事件循环。硬刷新一出现，就拿当前还没改好的地址去重载。于是：

旧地址   → router.replace → 路由还没跳转
              ↓
          window.location.reload
              ↓
      浏览器用旧地址重新请求
              ↓
      页面重新加载，依旧带旧参数
      
触发 router.replace ...

这就是无限刷新的根源。你kan，两行代码单独dou没问题，但组合在一起就成了“异步 + 同步”的噩梦。

`delete` 在不同对象上行为不一样。Ru果你拿的是普通 JS 对象，用 `delete obj.key` 就Neng删掉属性；Ru果是 `URLSearchParams`，`delete` 关键字根本不起作用，只Neng用 `.delete` 方法。

hen多框架为了让你Neng像读属性一样读参数，把 `URLSearchParams` 转成普通对象，所以当你写 `?${searchParams.toString}` 时其实拼出来的是 `?=` 而不是空查询字符串。

于是即使软导航跑完，你得到的新 URL 也可Neng是错误的，再刷新就又回到原来的参数——死循环继续。

说实话，这种问题往往隐藏在“两个世界”交叉处：框架的软导航和浏览器的硬导航。Ru果你误把它们当作同一种操作来用，就容易踩坑。

`router.replace`: 异步排队，不立即生效。

`window.location.reload`: 同步立即重载，用当前 URL。

`history.replaceState`: 同步 地址栏和历史记录，但不会触发路由变化或页面重载。

`location.replace`: 同时Zuo「去掉历史」「直接加载」三件事，Zui稳妥。

下面给你一个可直接拷贝粘贴进去的函数，它先同步删掉一次性参数，再用浏览器 API 完成一次跳转与重载，没有任何异步竞争：

function refreshWithoutParams {
    const url = new URL;
    keys.forEach);
    // 同步导航到新 URL，并且不留历史记录
    window.location.replace);
}

注意：这里用的是 `location.replace` 而不是 `router.replace` 或者 `history.replaceState` + `reload` 的组合，因为它是一条原子操作——地址改好后立马重载，不会被软导航打断。

wanna keep using your framework's API? 那就把它拆成两步但保证顺序：

`router.push` 并在其 Promise 里调用 `alert` 来确认地址Yi变；然后再手动调用 `alert` 和 `windows.location.reload`；这样Ke以保证先完成软导航再刷新的顺序。或者直接用框架提供的 `replaceState + reload` 方法组合，但记得检查实现是否真的调用了 `window.location.reload` 而不是仅仅geng新状态。

`history.replaceState` + `windows.location.reload` 也是可行，但前提是你确信框架不会监听并阻止这一操作。

简而言之，要么全部走浏览器 API，要么确保软导航真正完成再Zuo刷新。

说实话，有时我也会怀疑自己写的网站到底有没有被搜索引擎抓住。为什么百度不收录？原因有hen多：内容质量低、没有外链、robots.txt 阻止爬虫、甚至备案信息有问题。但从技术层面讲，Ru果你的站点大量使用单页应用并且没有服务器端渲染，搜索引擎爬虫hen难抓取 JavaScript 渲染后的内容。所以在设计前端路由时也要考虑 SEO 的需求。比如在关键页面加上 `` 或者使用预渲染工具，让爬虫Nengkan到完整内容。

不要把异步 soft navigation 当作同步操作来对待；

删除一次性参数时要确认对象类型；

Zui好用单一原子操作完成“删+刷”，避免两段代码互相抢夺时间线。

若坚持使用框架 API，请确保后续动作真正等待前一步完成，否则就会 陷入循环。

别忘了 SEO，SPA 需要 SSR 或预渲染才Neng让搜索引擎抓取到内容哦！