17370845950

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 后内容）

主流框架内置路由方案

现代开发中更常用成熟封装，兼顾功能与体验：

• React Router（v6+）：基于 createBrowserRouter 或 createHashRouter，支持嵌套路由、懒加载、导航守卫、数据加载等
• Vue Router（v4+）：提供 createWebHistory（HTML5 模式）和 createWebHashHistory，深度集成 Vue 响应式系统
• Angular Router：模块化设计，支持预加载、守卫、参数解析、延迟加载等企业级特性

轻量级独立路由库

适用于非框架项目或需要最小依赖的场景：

• Page.js：极简，类似 Express 的路由语法，支持中间件和参数解析
• Navigo：专注 HTML5 History 模式，API 清晰，支持正则匹配和查询参数
• Wouter：React 专用，零依赖，用 Hooks 实现，体积仅 ~1KB