浏览器原生支持前端路由，需用history.pushState修改URL而不刷新，监听popstate处理前进后退，代理a标签点击拦截默认跳转，并配置服务端将非资源请求均返回index.html。
浏览器原生支持 history.pushState 和 hashchange，不需要框架也能实现前端路由——关键在于拦截导航、更新视图、同步 URL，同时避免页面刷新。
用 history.pushState 替代页面跳转
直接调用 location.href = '/user' 会触发完整刷新；必须用 history.pushState 修改 URL 而不重载。它不触发 popstate，只影响地址栏和历史栈。
- 第一个参数是任意状态对象（可为
null），后续在popstate事件中能读取 - 第二个参数是 title（多数浏览器忽略，传空字符串即可）
- 第三个参数才是真实路径，必须是同源的相对路径（如
'/post/123'），不能是绝对 URL - 调用后需手动渲染对应视图，
pushState本身不做任何 DOM 操作
history.pushState({ page: 'user' }, '', '/user');
// 此时 URL 变为 https://example.com/user，但页面未刷新
监听浏览器前进/后退：捕获 popstate 事件
用户点击返回按钮或调用 history.back() 时，会触发 popstate，但仅当历史记录由 pushState 或 replaceState 创建时才触发——初始页面加载不会触发。
- 必须在
DOMContentLoaded后绑定，否则可能漏掉首次进入时的状态 -
event.state是你传入pushState的状态对象，可用于快速判断路由意图 - 如果没传状态，只能靠
location.pathname解析当前路径 - 不要在
popstate里再调用pushState，否则会无限循环
window.addEventListener('popstate', (event) => {
const path = location.pathname;
if (path === '/user') renderUserPage();
else if (path === '/post') renderPostList();
});
拦截所有内部链接点击，防止默认跳转
用户点击 <a href="/settings"> 仍会刷新页面。必须全局代理点击事件，对同源的相对路径链接调用 preventDefault() 并手动路由。
立即学习“Java免费学习笔记（深入）”；
- 用事件委托绑定到
document，避免漏掉动态插入的链接 - 检查
event.target.href是否同源且为相对路径（可用new URL(href).origin === location.origin判断） - 匹配成功后调用
history.pushState+ 渲染，而非location.assign - 注意排除带
target="_blank"、download或含javascript:的链接
document.addEventListener('click', (event) => {
const link = event.target.closest('a[href]');
if (!link) return;
const url = new URL(link.href);
if (url.origin === location.origin && url.pathname !== location.pathname) {
event.preventDefault();
history.pushState({ path: url.pathname }, '', url.pathname);
navigateTo(url.pathname); // 自定义渲染函数
}
});
服务端需 fallback 到 index.html
用户直接访问 https://site.com/dashboard 时，请求会发到服务端。如果服务端没配置，会返回 404 —— 因为实际没有 /dashboard 这个文件。
- 静态服务器（如 Nginx）需配置：所有非资源请求（即非
.js、.css、.png等）都返回index.html - Vite / Webpack Dev Server 默认开启
historyApiFallback，但生产环境部署必须由服务端保证 - 不能依赖前端
404页面重定向，因为那是客户端行为，对直接访问无效
最易被忽略的是：开发时一切正常，上线后深层路由全部 404。这不是 JS 写错了，是服务端没配好。
