更多内容，请访问：两种路由模式及React-Router中的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 对象。
精彩链接
您阅读本篇文章共花了：
发表评论