javascript如何实现路由功能_前端路由有哪些实现方式

前端路由分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，维护路由表，响应路径变化：

标签： vue react javascript java html js 前端 go html5 nginx seo 浏览器