了解 window.history 和 window.location, 更好地掌握 vue-router、react-router单页面路由

在 JavaScript 中，History 是浏览器提供的一个内置对象（通过 window.history 访问），用于管理浏览器的会话历史记录（即用户浏览过的页面序列）。它是实现无刷新页面跳转（如单页应用 SPA 的路由）的核心工具，同时也支持传统的前进、后退等操作。

刷新页面 与 不刷新页面？

在 history 对象的语境中，"刷新页面" 和 "不刷新页面" 指的是修改 URL 或导航时是否触发浏览器重新加载页面。

刷新页面（传统导航）

刷新页面，浏览器会重新请求服务器并加载新页面，整个页面会刷新（白屏后重新渲染）。这是传统多页应用的默认行为。

会刷新页面的方法

• location.assign(url)，跳转到指定的 url（与 location.href = url 效果相同），会在历史记录中添加新记录（可后退）。
• location.reload(forceReload)，刷新当前页面，不改变历史记录。
• location.replace(url)，跳转到指定的 url，但替换当前历史记录（不会新增记录，无法后退到当前页）。

不刷新页面（SPA 无刷新导航）

不刷新页面，浏览器不会重新请求服务器，页面内容可通过 JavaScript 动态更新。修改 URL 和历史记录，但不触发页面刷新。这是单页应用（SPA）实现无刷新路由的核心原理。

不刷新页面的 history 方法：

• history.pushState(state, title, url)：添加新的历史记录，更新 URL，但不刷新页面。
• history.replaceState(state, title, url)：替换当前历史记录，更新 URL，同样不刷新页面。

History

在单页应用（SPA）中，history.go(n)、history.forward()（以及 history.back()）默认不会「重新加载整个页面」 ------ 它们只是切换浏览器历史记录栈中的条目，复用已缓存的页面资源，仅在特殊场景下才会触发刷新。

http://localhost:5173/yo/home

location

http://localhost:5173/yo/home

popstate 事件（监听历史记录变化）

popstate 仅在「历史记录栈发生变化」且「不是新增记录」时触发 。当用户通过 浏览器前进 / 后退按钮，或通过 back()/forward()/go() 方法切换历史记录时触发。

注意 1、调用 pushState 或 replaceState不会触发此事件。 2、首次加载页面（无历史记录变更），不触发。

hashchange 事件

hashchange 事件是 JavaScript 中用于监听浏览器地址栏中 Hash 部分变化 的事件。

vue-router v4/v5 、react-routerv6 已经不再监听 hashchange事件了。

hashchange 触发场景：

1. 手动修改地址栏中的 Hash 并回车（如从 #/home 改为 #/about）。
2. 点击页面中带有 Hash 的链接（如 <a href="#/contact">联系我们</a>）。
3. 通过 JavaScript 修改 location.hash（如 location.hash = '#/login'）。

hashchange 不会触发的场景：

• history.pushState、history.replaceState 方法执行不会触发。
• 页面首次记载不会触发。