HashRouter依赖window.onhashchange事件来监听URL哈希值的变化，而HistoryRouter利用history.pushState和window.onpopstate处理页面导航，无需#号，但需要后端配合防止404错误。history模式提供更优雅的URL，但在低版本浏览器中可能需使用hash模式。
22.说一说 HashRouter 和 HistoryRouter的区别和原理？
得分点：
window.onhashchangehistory.pushStatewindow.onpopstate
标准回答：
HashRouter和HistoryRouter的区别：
①
history和hash都是利用浏览器的两种特性实现前端路由
history是利用浏览历史记录栈的API实现
hash是监听location对象hash值变化事件来实现
②history的url没有'#'号，hash反之
③ 相同的url，history会触发添加到浏览器历史记录栈中，hash不会触发，history需要后端配合，如果后端不配合刷新新页面会出现404，hash不需要。
HashRouter的原理：
通过
window.onhashchange方法获取新URL中hash值，再做进一步处理
HistoryRouter的原理：
通过
history.pushState使用它做页面跳转不会触发页面刷新，使用window.onpopstate监听浏览器的前进和后退，再做其他处理
加分回答：
hash模式下url会带有#，需要url更优雅时，可以使用history模式。 需要兼容低版本的浏览器时，建议使用hash模式。
需要添加任意类型数据到记录时，可以使用history模式
💞💖💓💗每个时代，
✨🌟⭐️💫都悄悄犒赏会学习的人。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
