JavaScript路由切换核心是不刷新页面改变URL并更新视图，依赖History API（pushState/replaceState）和popstate事件监听，或Hash模式的hashchange事件，本质是路径字符串到渲染逻辑的映射。
JavaScript 实现路由切换，核心是不刷新页面的前提下改变 URL 并响应视图更新——这正是单页面应用（SPA）导航的基础。关键不在于重载整个页面，而在于监听 URL 变化、解析路径、匹配对应组件或内容，并动态渲染。
使用原生 History API 控制地址栏与前进后退
现代 SPA 路由依赖 history.pushState() 和 history.replaceState() 修改 URL，配合 popstate 事件监听浏览器导航操作（如点击返回/前进按钮）。
- pushState()：添加新记录到历史栈（用户可点“返回”回到上一页）
- replaceState()：替换当前历史记录（不增加新条目）
- 监听 popstate：在 URL 改变且由浏览器导航触发时执行路由逻辑
示例片段：
function navigateTo(path) {
history.pushState({ path }, '', path);
renderView(path); // 自定义渲染函数
}
window.addEventListener('popstate', (e) => {
renderView(e.state?.path || location.pathname);
});
// 点击链接时阻止默认跳转
document.querySelectorAll('a[data-router]').forEach(a => {
a.addEventListener('click', e => {
e.preventDefault();
navigateTo(a.getAttribute('href'));
});
});
手动实现简易前端路由器（Hash 或 History 模式）
Hash 模式兼容性更好（URL 中 #/about），History 模式更美观（/about），但需服务端配合避免 404。
立即学习“Java免费学习笔记（深入）”；
-
Hash 路由：监听
hashchange事件，读取location.hash匹配路径 -
History 路由：用
pushState+popstate，首次加载需检查location.pathname - 建议统一抽象一个
Router类，支持add(path, callback)和start()
匹配路径并渲染对应视图（无需框架也能做）
路由本质是「路径字符串 → 渲染逻辑」的映射。可用对象或 Map 存储规则，支持简单参数提取（如 /user/123 → { id: '123' }）。
- 用正则或
URLPattern（较新，部分浏览器支持）解析带参数的路径 - 渲染时推荐清空容器再插入 HTML，或用
innerHTML/replaceChildren() - 可结合
fetch()加载对应模板或数据，实现按需渲染
实际开发中建议用成熟方案而非重复造轮子
虽然手写路由有助于理解原理，但真实项目推荐使用经过验证的库：
- React Router（v6+）：声明式路由、嵌套路由、数据加载集成好
- Vue Router：与 Vue 响应式深度结合，支持懒加载和导航守卫
- Page.js 或 Navigation API（实验性）：轻量级选择，适合小项目或微前端场景
它们已解决路由嵌套、滚动复位、权限控制、错误边界等常见问题，节省大量调试时间。
