22.说一说 HashRouter 和 HistoryRouter的区别和原理?
得分点:
window.onhashchange
history.pushState
window.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模式
💞💖💓💗每个时代,
✨🌟⭐️💫都悄悄犒赏会学习的人。