深入理解前端中的 hash 和 history 路由
最新回答
冰河铺子
2020-06-01 11:24:39
在Vue或React等前端渲染中，通常会有hash路由和history路由两种方式。
实现这两种路由，深入了解其底层原理。主要实现以下功能：
- hash路由
当页面中的hash发生变化时，会触发hashchange事件。通过监听此事件，判断路由变化。
- 实现过程
通过拆分oldURL和newURL，获取详细hash值。创建HashRouter类，实现获取当前hash路由。
监听hashchange事件和load事件，确保在页面首次加载时也能获取路由变化。
- 调用方式
完成基本功能后，配合示例，形象展示hash路由实现。
- history路由
history路由中，使用window.history方法实现页面URL改变，不触发请求。
常见操作包括前进、后退、跳转至指定URL。服务端支持是使用history路由的前提。
- 应用场景
pushState和replaceState与location.href和location.replace的区别及适用场景。
- 无法监听路由变化
history路由时，popstate事件无法捕捉到路由变化。使用window.dispatchEvent添加事件解决。
监听pushState和replaceState方法，确保路由变化被正确响应。
- 完整代码
完整代码包括hash和history路由的实现和应用示例。
实际案例：腾讯新闻中的抢金达人活动，采用前端历史路由的渲染方式。
- 总结
两种路由的原理和实现方式至此介绍完毕，欢迎反馈和建议。
热门标签
