关于hash和history介绍

关于hash和history介绍

前言
此文章借鉴参考简书作者 大黑豹 文章，在次编写是为了让自己记忆更加牢固，切有便于码友搜索借鉴。
从用户角度去看，前端路由实现了两个功能（ajax为例）
1.记录当前页面的状态（保存或者分享当前页的url，再次打开该url时网页还是保存时的状态）
2.使用浏览器前进后退功能时，让页面回到ajax请求之前的状态，url也一样
作为开发着，要实现这两个功能 需要：
1.改变url且不让浏览器向服务器发送请求。
2.监测url的变化。
3.截获url地址，解析出url携带的信息去匹配路由规则。
hash
指url尾巴后的#号后面的字符，（类似css里的#，可以称作为锚点，本身是用来做页面定位的，可以使对应的id元素显示在可视区域）
由于hash值得变化不会导致浏览器向服务其发送请求，而且hash改变会触发hashchange事件，浏览器的前进后退也能对其进行控制，所以人们在html5的history出现前基本使用hash来实现前端路由，特点时改变hash不会重新加载页面，hash的传参是基于url的，如果传递复杂的数据回有体积的限制

例：（使用api时）

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

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

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

history
history模式不仅可以在url里放参数，还可以将数据存放在一个特定夫人对象中。
history----利用HTML5 History Interface中新增的方法pushState（）和replaceState()这两种方法不支持IE8

例：（使用api时）

window.history.pushState(state,title,url)
//state:需要保存的数据，这个数据在触发popstate事件时，可以在event.state中获取
//title：标题，基本没用，一般传null
//url：设定新得历史记录url。新的url与当前的orgin必须是一样的，否则会抛出错误。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.historyreplaceState(state,title,url)
//与pushState基本相同，但是他修改当前历史记录，而pushState是创建新得历史记录
window.addEventListener("pospstate",function(){
//监听浏览器的前进后退事件，pushState与replaceState方法不会触发
})
window.history.back（）//后退
window.history.forward()//前进
window.history.go(1)//前进一步，（-2）后退两步，window.history.lengthk可以查看当前历史堆栈中页面的数量

**这两个方法应用于浏览器的历史纪录站，在当前已有的back、forward、go 的基础之上，他们提供了对历史纪录进行修改的功能，只是当他们执行修改使，虽然改变了当前的url，但你的浏览器不会立即像后端发送请求。
**
404
1、hash模式下，仅hash符号之前的内容会被包含在请求中，如 http://www.abc.com 因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回404错误；
2、history模式下，前端的url必须和实际后端发起请求的url一致，如http://www.abc.com/book/id 。如果后端缺少对/book/id 的路由处理，将返回404错误。

原文连接：https://www.jianshu.com/p/ae8f9c41a77c