hash和history的原理和区别

Posted 2023-05-06

原理区别
hash原理：hash通过监听浏览器的onhashchange()事件变化，查找对应的路由规则
history原理： 利用H5的 history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听URL变化
history模式
利用了html5 History Interface中新增的pushState()和replaceState()方法，这两个方法应用于浏览器的历史记录栈，在当前已有的back、forward、go的基础上，他们提供了对当前浏览器进行修改的功能，只是当它们被修改时，虽然浏览器的URL发生
了变化，但是不会立即向后端服务器发送请求，但是如果点击刷新，就会重新向后端服务器发送请求。
hash 就是指 url 尾巴后的 # 号以及后面的字符，history没有底带#，外观上比hash 模好看些
hash回车刷新会加载到地址栏对应的页面，history一般就是404掉了
hash 能兼容到IE8， history 只能兼容到 IE10；
hash 值变化不会导致浏览器向服务器发出请求,而且 hash 改变会触发 hashchange 事件（hashchange只能改变 # 后面的url片段）；虽然hash路径出现在URL中，但是不会出现在HTTP请求中，对后端完全没有影响，因此改变hash值不会重新加载页面，基本都是使用 hash 来实现前端路由的。 参考技术A Hashihnstory的原理和区别，我认为这应该非常不错，而且这个应该可以达到更好的一个园内使用性能，所以我认为这应该可以达到更好的使用程度，还是非常好的。 参考技术B H和history的原理和区别。他们的原理和区别都有，并且不是叙述几分钟几秒钟就可以完成的，你在网上下载一下子。 参考技术C 原理和区别就是他们的大两个单词是不一样的，所以话就是他们家的原理和以及它的区别点。 参考技术D Hash和history的原理和区别在于两者的原理，基本上没有什么区别，而最大的区别之处在于于他们所网络的群体不同

hash和history

vue-router 中hash模式和history模式。

在vue的路由配置中有mode选项，最直观的区别就是在url中hash 带了一个很丑的 # ，而history是没有#的。vue默认使用hash。

mode:"hash";
mode:"history";
hash
—— 即地址栏 URL 中的 # 符号（此 hash 不是密码学里的散列运算）。
比如这个 URL：http://www.aaa.com/#/hello，hash 的值为 #/hello。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。

history
—— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。

因此可以说，hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。

history模式的问题
       通过history api，我们丢掉了丑陋的#，但是它也有个问题：不怕前进，不怕后退，就怕刷新，f5，（如果后端没有准备的话）,因为刷新是实实在在地去请求服务器的。
       在hash模式下，前端路由修改的是#中的信息，而浏览器请求时不会将 # 后面的数据发送到后台，所以没有问题。但是在history下，你可以自由的修改path，当刷新时，如果服务器中没有相应的响应或者资源，则会刷新出来404页面。