前端路由分Hash和History两种实现：Hash靠location.hash变化与hashchange事件，兼容性好但URL带#；History用pushState/replaceState和popstate，URL干净需服务端fallback；手动实现需维护路由表并监听路径变化；主流框架路由库均基于二者封装。
前端路由不依赖服务端，靠 JavaScript 拦截 URL 变化并动态更新页面内容。核心在于监听地址栏变化、解析路径、匹配对应组件或逻辑，不刷新页面就能切换视图。
基于 URL Hash 实现
利用 location.hash 的变化（如 #/home → #/about）触发路由跳转。Hash 改变不会导致页面重载，且支持 hashchange 事件监听。
- 监听方式：
window.addEventListener('hashchange', handler) - 获取当前路径：
location.hash.slice(1)（去掉 #） - 跳转方式：
location.hash = '/user'或history.pushState配合 hash（但更常用原生 hash 操作） - 优点：兼容性好，IE8+ 即可支持；实现简单
- 缺点：URL 中带 #，语义性弱，SEO 不友好（现代搜索引擎已能抓取，但仍有局限）
基于 HTML5 History API 实现
使用 pushState、replaceState 修改 URL（如 /product/123），配合 popstate 事件监听浏览器前进/后退。
- 跳转示例：
history.pushState({ page: 'detail' }, '', '/detail?id=123') - 监听返回/前进：
window.addEventListener('popstate', e => { console.log(e.state) }) - 注意：直接访问 history 路由路径时，服务端需配置 fallback（如 Nginx 返回 index.html），否则 404
- 优点：URL 干净、语义清晰、利于 SEO 和用户体验
- 缺点：需要服务端配合；IE10+ 支持，低版本需降级到 hash
手动实现一个简易前端路由器
结合 History API，维护路由表，响应路径变化：
立即学习“Java免费学习笔记（深入）”；
- 定义路由映射：
const routes = { '/': renderHome, '/about': renderAbout } - 初始化时解析当前路径并渲染：
routes[location.pathname]?.() - 监听 popstate：
onpopstate = () => routes[location.pathname]?.() - 封装跳转函数：
function goTo(path) { history.pushState({}, '', path); routes[path]?.(); } - 可进一步支持参数解析（如
/user/:id）、嵌套路由、守卫等
主流框架中的路由方案
实际项目中多用成熟库，避免重复造轮子：
-
React Router（v6+）：基于
createBrowserRouter+RouterProvider，声明式路由，支持嵌套、懒加载、导航守卫 - Vue Router（v4）：与 Vue 响应式深度集成，支持命名路由、路由元信息、滚动行为控制
-
Next.js / Nuxt.js：文件系统路由（
pages/或app/目录结构自动生成路由），服务端渲染友好 - 这些库底层仍基于 History API 或 Hash，但封装了匹配、生命周期、状态同步等复杂逻辑
