hash和history的详谈

原理

hash模式：地址栏URL中带有#符号的模式是通过监听浏览器onhashchange触发的路由模式。
history模式： 利用HTML5特性中pushState()和replace（）实现的。允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求。

hash特点

• hash变化会触发网页跳转，即浏览器的前进和后退。
• hash 可以改变 url ，但是不会触发页面重新加载（hash的改变是记录在 window.history 中），即不会刷新页面，而是会触发 onhashchange 事件。也就是说，所有页面的跳转都是在客户端进行操作。因此，这并不算是一次 http 请求，所以这种模式不利于 SEO 优化。hash 只能修改 # 后面的部分，所以只能跳转到与当前 url 同文档的 url 。
• hash 通过 window.onhashchange 的方式，来监听 hash 的改变，借此实现无刷新跳转的功能。

history的特点

• 新的 url 可以是与当前 url 同源的任意 url ，也可以是与当前 url 一样的地址，但是这样会导致的一个问题是，会把重复的这一次操作记录到栈当中。
• 通过 history.state ，添加任意类型的数据到记录中。
• 可以额外设置 title 属性，以便后续使用。
• 通过 pushState 、 replaceState 来实现无刷新跳转的功能。

存在的问题

1.使用 history 模式时，在对当前的页面进行刷新时，此时浏览器会重新发起请求。如果 nginx 没有匹配得到当前的 url ，就会出现 404 的页面。

2.而对于 hash 模式来说， 它虽然看着是改变了 url ，但不会被包括在 http 请求中。所以，它算是被用来指导浏览器的动作，并不影响服务器端。因此，改变 hash 并没有真正地改变 url ，所以页面路径还是之前的路径， nginx 也就不会拦截。

3.因此，在使用 history 模式时，需要通过服务端来允许地址可访问，如果没有设置，就很容易导致出现 404 的局面。

nginx配置

location / {
  try_files $uri $uri/ /index.html;
}

区别

1.url 展示上，hash 模式有“#”，history 模式没有

2.hash 值的改变不会重新加载页面。因为它的值不会被包含在请求中路径上,所以修改也不会影响请求的路径. history使用通过 pushState 、 replaceState 来实现无刷新跳转的功能

3.使用 history 模式时，在对当前的页面进行刷新时，此时浏览器会重新发起请求。如果 nginx 没有匹配得到当前的 url ，就会出现 404 的页面。

4.hash 兼容性更强, 可以支持低版本浏览器和 IE。

chatGPT给出的解释

Hash和History是两个在网页浏览器中常用的JavaScript API。

Hash是URL中的#号以及其后面的部分，例如：http://example.com/#/path/to/page。Hash的主要作用是用于在单页面应用中实现路由功能，可以在URL中标记不同的页面状态，由JavaScript解释器解释，并根据不同的状态加载相应的页面内容。

History是浏览器提供的一种API，可以通过JavaScript代码执行浏览器的前进、后退等操作，从而在不刷新页面的情况下改变URL地址。History对象提供了一系列方法，如back()、forward()、go()等，可以操作浏览器的历史记录栈，实现前进、后退等操作。