问:
hash和history的区别
回答:
-
工作原理:
- 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模式。
- hash模式:利用锚点技术,通过改变URL中的hash部分(即#后面的部分)来实现页面跳转,不会重新加载页面。例如,URL变为
-
刷新页面时的行为:
- hash模式:在hash模式下,刷新页面时,浏览器会保留当前的hash值,因此不会返回404错误。例如,即使URL变为
http://www.example.com/#/home
,浏览器也会正常显示页面内容。 - history模式:在history模式下,刷新页面时会向服务器发送请求,如果服务器没有对应的路由处理,则会返回404错误。例如,如果URL变为
http://www.example.com/home
,而服务器没有对应的路由处理,则会返回404错误。
- hash模式:在hash模式下,刷新页面时,浏览器会保留当前的hash值,因此不会返回404错误。例如,即使URL变为
-
兼容性:
- hash模式:兼容性较好,几乎所有浏览器都支持锚点技术,不需要服务器特别配置。
- history模式:需要HTML5支持的浏览器,不支持IE6-8等老版本浏览器。
-
使用场景:
- hash模式:适合对兼容性要求较高的项目,或者开发测试阶段使用。2
- history模式:适合对URL美观度有要求的项目,需要与后端配合,确保所有路由都有对应的处理。