JavaScript路由通过监听URL变化动态切换视图而不刷新页面，核心是pushState/replaceState修改地址栏+popstate/hashchange监听导航，Hash模式兼容性好，HTML5模式需服务端fallback配置。
JavaScript 路由是单页面应用（SPA）中不刷新页面、仅动态切换视图的核心机制。它靠监听 URL 变化（如 hashchange 或 popstate），匹配路径并渲染对应组件或内容，而非向服务器发起新请求。
为什么不能直接用 window.location.href = '/user'？
那样会触发完整页面跳转，破坏 SPA 的体验和状态。真正的 JS 路由必须：
- 修改浏览器地址栏（但不重载页面）——用
history.pushState()或修改location.hash - 监听用户点击后退/前进按钮 —— 绑定
popstate（HTML5 模式）或hashchange（Hash 模式） - 避免服务端 404：若用 HTML5 模式，需服务端配置 fallback（如 Nginx 返回
index.html）
history.pushState() 和 replaceState() 的区别
两者都改变 URL 且不刷新，但行为不同：
-
pushState()向历史栈添加一条新记录，用户可点「后退」回到上一状态 -
replaceState()替换当前历史记录，不会增加栈长度，适合表单提交后跳转避免重复提交 - 两个方法第一个参数是任意 state 对象（可存组件名、查询参数等），第二个是 title（多数浏览器忽略），第三个才是 URL（必须同源）
history.pushState({ page: 'user', id: 123 }, '', '/user/123');
history.replaceState({ page: 'profile' }, '', '/profile');手写一个最小可用的 Hash 路由
Hash 模式兼容性好，无需服务端配合，适合快速验证逻辑。关键点：
立即学习“Java免费学习笔记（深入）”；
- 用
location.hash读取当前路径（注意开头的#） - 监听
hashchange，不要只依赖初始化时读一次 - 路由表用对象映射，值是渲染函数，避免
eval或字符串模板 - 确保首次加载时也执行一次匹配（
hashchange不会触发初始状态）
const routes = {
'#/': () => document.body.innerHTML = 'Home
',
'#/about': () => document.body.innerHTML = 'About
',
'#/user': () => document.body.innerHTML = 'User
'
};
function render() {
const hash = location.hash || '#/';
(routes[hash] || routes['#/'])();
}
window.addEventListener('hashchange', render);
render(); // 首次加载
真实项目中该选 Hash 还是 HTML5 History 模式？
别只看“更现代”——得看部署环境：
- 静态托管（GitHub Pages、Vercel、Netlify）：默认支持 HTML5 模式，但需确认重写规则是否启用（如
/* → /index.html） - 传统 Nginx/Apache：必须手动配
try_files $uri $uri/ /index.html;，否则子路径刷新直接 404 - 嵌入 WebView 或老旧内嵌浏览器（如某些 Android 系统 WebKit）：Hash 模式更稳，
pushState可能不可用或行为异常 - SEO 需求强：HTML5 模式 URL 更友好，但 SPA 本身仍需 SSR 或预渲染补足
最常被忽略的一点：History 模式下，pushState 改变 URL 后，如果用户手动刷新，服务端必须返回你的入口 HTML；而 Hash 模式下，# 后内容根本不会发给服务端，天然安全。
