hash和history的区别

hash和history的区别

一、从用户的角度看路由需实现以下两个功能

• 记录当前页的状态

保存或分享当前页面的URL，再次打开该URL时，网页还是保存的分享时的状态

• 可使用浏览器的前进后退功能

（如点击后退按钮，可以使页面回到ajax更新页面之前的状态，url也回到之前的状态）

二、作为开发者，要实现这两个功能，我们需要

• 改变url且不让浏览器向服务器发出请求；
• 监测url的变化；
• 截获url地址，并解析出需要的信息来匹配路由规则。

三、我们常用的hash模式和history模式实际上就是实现了上面的功能

1. hash模式

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

  window.location.hash='qq'//设置 url 的 hash，会在当前url后加上'#qq'

var hash = window.location.hash //'#qq'

window.addEventListener('hashchange',function(e){
  //监听hash变化，点击浏览器的前进后退会触发
   console.log(event.oldURL, event.newURL);
})
//或者使用以下方式
//window.onhashchange = function(event){
//     console.log(event.oldURL, event.newURL);
//}

2. history模式

Hash的hashchange，你只能改变#后面的url片段，而history api则给了前端完全的自由。history模式不仅可以在url里放参数，还可以将数据存放在一个特定的对象中。

history api可以分为两大部分，切换和修改。

history切换

切换历史状态包括back、forward、go
三个方法，对应浏览器的后退，前进，跳转操作，有同学说了，(谷歌)浏览器只有前进和后退，没有跳转，嗯，在前进后退上长按鼠标，会出来所有当前窗口的历史记录，从而可以跳转。

history.go(-2);//后退两次
history.go(2);//前进两次
history.back(); //后退
hsitory.forward(); //前进

history修改

history利用了H5中 History API中新增的pushState（）和replaceState（）方法。

window.history.pushState(state,title,url)
//state：需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
//title：标题，基本没用，一般传null
//url：设定新的历史纪录的url。新的url与当前url的origin必须是一样的，否则会抛出错误。url可以时绝对路径，也可以是相对路径。
//如 当前url是 https://www.baidu.com/a/,执行history.pushState(null, null, './qq/')，则变成 https://www.baidu.com/a/qq/，
//执行history.pushState(null, null, '/qq/')，则变成 https://www.baidu.com/qq/

window.history.replaceState(state,title,url)
//与pushState 基本相同，但她是修改当前历史纪录，而 pushState 是创建新的历史纪录

window.addEventListener("popstate",function(event){
 //监听浏览器前进后退事件，pushState与replaceState方法不会触发
  console.log(event.state)
})
//window.history.length可以查看当前历史堆栈中页面的数量

​ 通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象，从而可以对页面状态进行还原，这里的页面状态就是页面字体颜色，其实滚动条的位置，阅读进度，组件的开关的这些页面状态都可以存储到state的里面。
​ 这两个方法应用于浏览器的历史纪录，在当前已有的back、forward、go 的基础之上，他们提供了对历史纪录进行修改的功能，只是当他们执行修改使，虽然改变了当前的url，但你的浏览器不会立即像后端发送请求。

总结

1、hash模式下，仅hash符号之前的内容会被包含在请求中，如 http://www.abc.com因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；
2、history模式下，前端的url必须和实际后端发起请求的url一致，如http://www.abc.com/details/id。如果后端缺少对/details/id 的路由处理，将返回404错误。