JavaScript前端路由核心是不刷新页面改变URL并响应视图变化，依赖History API或Hash机制，配合服务端fallback或hashchange事件，框架如React Router、Vue Router提供高级功能，轻量库如Page.js、Wouter满足特定场景需求。
JavaScript 实现前端路由，核心是**不刷新页面的前提下改变 URL 并响应视图变化**。这主要依赖浏览器的 History API（pushState、replaceState、popstate 事件）和 URL 的监听机制，配合动态渲染组件或内容。
原生 History API 手动实现简易路由
适合轻量场景或学习原理，无需框架：
- 用
history.pushState({path}, '', '/about')改变 URL（不触发刷新） - 监听
window.addEventListener('popstate', e => {...})捕获前进/后退操作 - 解析
location.pathname匹配路径，手动切换 DOM 内容或加载模块 - 注意：需配置服务端将所有路径 fallback 到
index.html，否则直连子路由会 404
Hash 路由（兼容性最强）
利用 URL 中 # 后的部分（hash），不向服务端发送，刷新也不会丢失：
- 通过
location.hash读取，监听hashchange事件响应变化 - 无需服务端配置，
http://site.com/#/user/123刷新仍停留在当前 hash - 缺点：URL 不够美观，SEO 不友好（搜索引擎通常忽略 hash 后内容）
主流框架内置路由方案
现代开发中更常用成熟封装，兼顾功能与体验：
立即学习“Java免费学习笔记（深入）”；
-
React Router（v6+）：基于
createBrowserRouter或createHashRouter，支持嵌套路由、懒加载、导航守卫、数据加载等 -
Vue Router（v4+）：提供
createWebHistory（HTML5 模式）和createWebHashHistory，深度集成 Vue 响应式系统 - Angular Router：模块化设计，支持预加载、守卫、参数解析、延迟加载等企业级特性
轻量级独立路由库
适用于非框架项目或需要最小依赖的场景：
