SPA是如何通过js不刷新页面但是更新浏览器的url的？

不刷新页面但更新浏览器 URL 的两种方式

概述

在不刷新页面的情况下更新浏览器 URL，可以通过两种方式实现：

1. History API ：通过 history.pushState() 和 history.replaceState() 间接更改 URL。
2. Hash Routing ：通过修改 URL 的 hash 直接更改 URL。

两种方式的本质都是更改 URL，但 History API 更现代且 URL 更简洁，而 Hash Routing 兼容性更好，适合旧浏览器。

---

1. 通过 History API

参考MDN History API

更改 URL

使用以下 API 更改 history 对象：

• history.pushState(state, unused, url)：添加新历史记录。
• history.replaceState(state, unused, url)：替换当前历史记录。

历史导航

使用以下方法进行历史记录的前进和回退：

• history.back()：回退到上一个历史记录。
• history.forward()：前进到下一个历史记录。
• history.go(delta)：跳转到指定历史记录。

UI 更新

• pushState 和 replaceState 不会触发页面刷新或事件，因此需要手动更新 UI。

---

2. 通过 URL Hash

更改 URL

通过 location.hash 直接修改 URL 的 hash 部分：

location.hash = 'hashValue';

UI 更新

• 手动更新 UI，或通过监听 hashchange 事件自动更新 UI：

window.addEventListener('hashchange', () => {
    console.log('Hash changed:', location.hash);
});

自定义前进后退

• 需要手动维护两个栈（backStack 和 forwardStack）来存储 hash 的变化历史。

---

对比与选择

• History API：更现代，URL 更简洁，但需要手动更新 UI。
• Hash Routing ：兼容性更好，适合旧浏览器，但 URL 中包含 #。

---

总结

通过 History API 和 Hash Routing，可以在不刷新页面的情况下更新浏览器 URL。History API 适合现代应用，而 Hash Routing 兼容性更强，适合旧浏览器。