17370845950

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 不会触发初始页面加载，需在初始化时手动处理当前路径

依赖浏览器原生能力的封装库

实际项目中多采用成熟路由库，它们在上述机制基础上做了抽象和增强。例如：

• 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）、嵌套路由、重定向等扩展点