面试问题：hash和history的区别

问：

hash和history的区别

回答：

1. ‌工作原理‌：

   • ‌hash模式 ‌：利用锚点技术，通过改变URL中的hash部分（即#后面的部分）来实现页面跳转，不会重新加载页面。例如，URL变为http://www.example.com/#/home时，hash值为#/home。这种模式下，hash值虽然出现在URL中，但不会被包含在HTTP请求中，因此不会对后端产生影响。‌12
   • ‌history模式 ‌：利用HTML5 History API中的pushState()和replaceState()方法，通过修改浏览器的历史记录来实现页面跳转。这种模式下，URL看起来更美观，没有#符号。例如，URL可以变为http://www.example.com/home。如果浏览器不支持这些方法，则无法使用history模式。

2. ‌刷新页面时的行为‌：

   • ‌hash模式 ‌：在hash模式下，刷新页面时，浏览器会保留当前的hash值，因此不会返回404错误。例如，即使URL变为http://www.example.com/#/home，浏览器也会正常显示页面内容。
   • ‌history模式 ‌：在history模式下，刷新页面时会向服务器发送请求，如果服务器没有对应的路由处理，则会返回404错误。例如，如果URL变为http://www.example.com/home，而服务器没有对应的路由处理，则会返回404错误。

3. ‌兼容性‌：

   • ‌hash模式‌：兼容性较好，几乎所有浏览器都支持锚点技术，不需要服务器特别配置。
   • ‌history模式‌：需要HTML5支持的浏览器，不支持IE6-8等老版本浏览器。

4. ‌使用场景‌：

   • ‌hash模式‌：适合对兼容性要求较高的项目，或者开发测试阶段使用。‌2
   • ‌history模式‌：适合对URL美观度有要求的项目，需要与后端配合，确保所有路由都有对应的处理。