hash和history的区别

一. vue-router（前端路由）有两种模式，hash模式和history模式
1.hash 就是指 url 后面的 # 号以及后面的字符，history没有带#，外观上比hash 模式好看些
2.原理的区别（原理）
3. hash 能兼容到IE8， history 只能兼容到 IE10；
4.由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件（hashchange只能改变 # 后面的url片段）；虽然hash路径出现在URL中，但是不会出现在HTTP请求中，对后端完全没有影响，因此改变hash值不会重新加载页面，基本都是使用 hash 来实现前端路由的。

二.原理：
1.hash通过监听浏览器的onhashchange()事件变化，查找对应的路由规则

2.history原理： 利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化

history模式URL就要和后端进行一致，所以要改为history也需要后端的配合，否则会报错。
所以hash模式在每次刷新页面时是直接更改“#”后的东西，history每次刷新会重新像后端请求整个网址，也就是重新请求服务器。如果后端没有及时响应，就会报错404！。history的好处是可以进行修改历史记录，并且不会立刻像后端发起请求。不过如果对于项目没有硬性标准要求，我们可以直接使用hash模式开发。
————————————————
版权声明：本文为CSDN博主「山顶的云彩」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_51396911/article/details/123866875