hash和history路由的区别

hash模式
hash就是指url尾巴后的#号以及后面的字符。这里的#和css里的#是一个意思。
hash也称作锚点,本身是用来做页面定位的,他可以使对应的id元素显示在可视区域内。 由于hash值变化不会导致浏览器向服务器发出请求,而且hash改变会触发hashchange事件,
浏览器的进后退也能对其进行控制,所以人们在html5的history出现前,基本都是使用hash来实现前端路由的。
他的特点在于:hash虽然出现url中,但不会被包含在HTTP请求中,对后端完全没有影响,因此改变hash不会重新加载页面。
hash 本来是拿来做页面定位的,如果拿来做路由的话,原来的锚点功能就不能用了。


window.addEventListener('hashchange',function(){ //监听hash变化,点击浏览器的前进后退会触发 })
 
history模式

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

window.addEventListener('popstate',function(){ //监听history变化,点击浏览器的前进后退会触发 })
区别
hash模式下,仅hash符号之前的内容会被包含在请求中,如 http://www.11.com 因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回404错误; history模式下,前端的url必须和实际后端发起请求的url一致,如http://www.222.com/aa/ 。如果后端缺少对/aa/ 的路由处理,将返回404错误。此时需要在后端作出相应的调整

  

猜你喜欢

转载自www.cnblogs.com/lisiyang/p/13177860.html