HTML5-原生History
history
浏览器历史记录对象
属性:
- length: 历史记录对象长度
方法:
-
go(n):
跳转到相应的历史记录，以当前历史记录为标准线0，回到之前历史记录，为负值，比如回到上一页，n就是-1，向后，就是正值，如果n === 0，相当于刷新当前页面。
-
back():
回到上一页，相当于浏览器后退按钮，也可以用go(-1)实现
-
forward():
前进到下一页，相当于浏览器前进按钮，也可以用go(1)实现
HTML5 对 History API 新增的两个方法：pushState()、replaceState()，均具有操纵浏览器历史记录的能力
-
history.pushState(state, title, url)
- state：用于存储该 url 对应的状态对象，可以通过 history.state 获取
- title：标题，目前浏览器并不支持
- url：定义新的历史 url 记录，需要注意，新的 url 必须与当前 url 同源，不能跨域
pushState 函数会向浏览器的历史记录中添加一条，history.length 的值会 +1，当前浏览器的 url 变成了新的 url。需要注意的是：仅仅将浏览器的 url 变成了新的 url，页面不会加载、刷新。
-
replaceState:
replaceState 的使用与 pushState 非常相似，都是改变当前的 URL，页面不刷新。区别在于 replaceState 是修改了当前的历史记录项而不是新建一个，history.length 的值保持不变。
监听事件
1. popstate事件
每当history对象出现变化时，就会触发popstate事件。
通过 a 标签或者 window.location 进行页面跳转时，都会触发 window.onload 事件，页面完成渲染。点击浏览器的后退键或前进键，根据浏览器的不同机制，也会重新加载（Chrome 浏览器），或保留之前的页面（Safari 浏览器）。而对于通过 history.pushState() 或 history.replaceState() 改变的历史记录，点击浏览器的后退键或前进键页面是没有反应的，那该如何控制页面渲染呢？为了配合 history.pushState() 或 history.replaceState()，HTML5 还新增了一个事件，用于监听 URL 历史记录改变：window.onpopstate()。
注意事项：
-
仅仅调用pushState()方法或replaceState()方法 ，并不会触发该事件;
-
只有用户点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发；
-
单纯的a标签不会触发；
-
另外，上面浏览器回退和前进事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。页面第一次加载的时候，浏览器不会触发popstate事件。使用的时候，可以为popstate事件指定回调函数，回调函数的参数是一个 event 事件对象，它的 state 属性指向当前的 state 对象；
2. hashchange事件
每当hash值发生变化时，就会触发hashchange事件，hash值的变化也会触发popstate事件
注意事项:
-
仅仅调用pushState()方法或replaceState()方法 ，并不会触发该事件;
-
另外，上面浏览器回退和前进事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。页面第一次加载的时候，浏览器不会触发hashchange事件。使用的时候，可以为hashchange事件指定回调函数，回调函数的参数是一个 event 事件对象，它的 state 属性指向当前的 state 对象。
更多内容，访问:
history
hash
单页面应用和多页面应用
React-Router源码分析-History库
History库源码分析-Action 动作类型
History库源码分析-createLocation
History库源码分析-createPath
History库源码分析-parsePath