JavaScript前端路由分Hash和History两种实现：Hash利用location.hash和hashchange事件，兼容性好但SEO差；History用pushState/replaceState和popstate事件，URL干净但需服务端配合返回同一HTML。
JavaScript前端路由主要靠监听URL变化并动态更新页面内容，不触发整页刷新。核心思路是拦截导航行为，解析路径，匹配对应组件或视图，再渲染。
基于 URL Hash 的实现
利用 location.hash 变化不重载页面的特性，通过监听 hashchange 事件实现路由切换。URL 形如 example.com/#/home 或 example.com/#/user/123。兼容性好，支持老浏览器，但语义性弱、不利于SEO，且无法使用 HTML5 History API 的功能（如前进后退状态管理）。
- 手动监听
window.addEventListener('hashchange', callback) - 读取
location.hash.slice(1)获取路径 - 根据路径字符串匹配路由表，调用对应渲染函数
基于 HTML5 History API 的实现
使用 pushState() 和 replaceState() 修改 URL，配合 popstate 事件监听浏览器前进/后退。URL 更干净（如 example.com/user/123），支持完整历史栈控制和更自然的导航体验。需服务端配合——所有前端路由路径都应返回同一份 HTML 入口文件，避免 404。
- 调用
history.pushState(state, title, url)更新地址栏 - 监听
window.addEventListener('popstate', callback)响应浏览器导航 - 注意：
popstate不会触发初始页面加载，需在初始化时手动处理当前路径
依赖浏览器原生能力的封装库
实际项目中多采用成熟路由库，它们在上述机制基础上做了抽象和增强。例如：
立即学习“Java免费学习笔记（深入）”；
-
React Router：v6 默认使用 History API，提供
BrowserRouter和HashRouter两种模式 -
Vue Router：支持
history和hash模式，可配置 base、scrollBehavior、路由守卫等 - Next.js / Nuxt.js：基于文件系统的约定式路由，底层仍依赖 History API，自动处理服务端渲染与客户端水合
手动实现简易路由的核心逻辑
适合学习原理或超轻量场景。关键在于维护一个路由映射表，并统一响应路径变更：
- 定义
routes = { '/home': renderHome, '/about': renderAbout } - 封装
router.navigate(path)方法，内部调用history.pushState+ 手动触发渲染 - 监听
popstate和hashchange，提取当前路径，查表执行对应函数 - 可加入参数解析（如
/user/:id）、嵌套路由、重定向等扩展点
