单页应用（SPA）路由依赖history API或hash实现无刷新切换：history.pushState修改URL不重载页面，需服务端fallback；hash通过location.hash兼容旧浏览器但SEO差；必须用popstate/hashchange事件监听导航，不能仅靠pathname轮询。
单页应用（SPA）的核心是不刷新页面的前提下切换视图，这依赖前端路由。JavaScript 本身没有内置路由，必须靠开发者用 history API 或 hash 变化来模拟路由行为。
用 history.pushState 实现无刷新跳转
现代 SPA 路由的主流方式是基于 HTML5 的 history API，它允许修改 URL 且不触发页面重载。
-
pushState()添加新历史记录，replaceState()替换当前记录，两者都不刷新页面 - 必须配合
popstate事件监听浏览器前进/后退操作 - 服务端需配置 fallback：所有非 API 路径都返回
index.html，否则直接访问/user/123会 404 - 注意：URL 必须是同源的，不能跨域调用
pushState
history.pushState({ page: 'about' }, '', '/about');
window.addEventListener('popstate', (event) => {
renderPage(event.state.page);
});
用 location.hash 实现兼容性更强的路由
在不支持 history API 的旧浏览器（如 IE9）中，hash 是唯一可靠方案；即使在现代项目里，它也因无需服务端配合而适合快速原型。
- URL 变化仅限
#后部分，例如example.com/#/settings - 监听
hashchange事件即可响应路由变化 - 不会向服务端发送请求，天然避免 404 问题
- 缺点：URL 不够美观，SEO 友好性差（搜索引擎曾长期忽略 hash 内容）
window.addEventListener('hashchange', () => {
const path = location.hash.slice(1) || '/';
renderPage(path);
});
// 触发跳转
location.hash = '#/profile';
为什么不能只靠 location.pathname 监听？
直接读取 location.pathname 并轮询或绑定 click 事件是常见误区——它无法捕获用户点击地址栏回车、浏览器前进/后退、或 JS 调用 history.back() 等行为。
立即学习“Java免费学习笔记（深入）”；
-
pathname是只读属性，无法监听变更 - 仅靠拦截
点击，漏掉所有非点击触发的导航（比如键盘 Alt+←） - 必须使用
popstate或hashchange这类原生事件，它们才是浏览器真正发出的路由变更信号
手写简单路由时容易忽略的边界情况
哪怕只是实现一个三行路由，以下几点常导致白屏或死循环：
- 未处理初始加载：页面首次打开时，需主动根据当前
location执行一次renderPage - 未防止重复渲染：
popstate在某些浏览器中会触发两次（如 Chrome 中从标签页切回） - 未清理事件监听：单页内多次初始化路由实例，可能叠加多个
popstate监听器 - 路径匹配逻辑太粗糙：比如用
includes('/user')匹配，会导致/users也被误判
真实项目中，这些细节比路由模式选择更消耗调试时间。
