hash和history两种模式的区别

两种模式的区别

1.hash 就是指 url 尾巴后的 # 号以及后面的字符，history没有带#，外观上比hash 模式好看些
3.hash模式在每次刷新页面时是直接更改“#”后的东西，history每次刷新会重新像后端请求整个网址，也就是重新请求服务器。如果后端没有及时响应，就会报错404！
3.hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://www.abc.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理，将返回 404 错误, 总结：虽然hash路径出现在URL中，但是不会出现在HTTP请求中，对后端完全没有影响，因此改变hash值不会重新加载页面，基本都是使用 hash 来实现前端路由的。

路由的实现原理

hash原理：hash通过监听浏览器的onhashchange()事件变化，查找对应的路由规则
istory原理： 利用H5的 history中新增的两个API pushState() 和 replaceState() 监听URL变化

一. URL的hash
URL的hash也就是锚点(#), 本质上是改变window.location的href属性.我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新

二.HTML5的history模式
history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面.
1.history.pushState()

2.history.replaceState()
3.history.go()
4.history.back()
5.history.forward()