React 路由管理 - history

window.history
属性：
1.state
返回在 history 栈顶的 任意 值的拷贝。 通过这种方式可以查看 state 值，不必等待 popstate事件发生后再查看。

如果不进行下面两种类型的调用，state 的值将会是 null
pushState() or replaceState().

2.length
History.length是一个只读属性，返回当前session中的history个数，包含当前页面在内。举个例子，对于新开一个tab加载的页面当前属性返回值1。

3.scrollRestoration
滚动恢复属性允许web应用程序在历史导航上显式地设置默认滚动恢复行为
auto: 将恢复用户已滚动到的页面上的位置。( 默认值 )
manual: 未还原页上的位置。用户必须手动滚动到该位置。

方法：
1.pushState: 使用state objects, title,和 URL 作为参数,向当前浏览器会话的历史堆栈中添加一个状态（state）
2.replaceState: 使用state objects, title,和 URL 作为参数， 修改当前历史记录实体
3.back: 在会话历史记录中向后移动一页。如果没有上一页，则此方法调用不执行任何操作。
4.go: 从会话历史记录中加载特定页面。你可以使用它在历史记录中前后移动，具体取决于delta参数的值。
5.forward: 在会话历史中向前移动一页。它与使用delta参数为1时调用 history.go(delta)的效果相同。

事件：
1.onpopstate
当活动历史记录条目更改时，将触发popstate事件，popstate事件的state属性包含历史条目的状态对象的副本。

只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在JavaScript中调用history.back()、history.forward()、history.go()方法）此外，a 标签的锚点也会触发该事件.。调用history.pushState()或者history.replaceState()不会触发popstate事件

不同的浏览器在加载页面时处理popstate事件的形式存在差异。页面加载时Chrome和Safari通常会触发(emit )popstate事件，但Firefox则不会。

2.hashchange
当URL的片段标识符更改时，将触发hashchange事件 (跟在＃符号后面的URL部分，包括＃符号)

3.beforeunload 事件触发于 window、document 和它们的资源即将卸载时。

window.location, window.document.location
Location 接口表示其链接到的对象的位置（URL）
1.pathname: 包含URL中路径部分的一个DOMString，开头有一个“/"。
2.search: 包含URL参数的一个DOMString，开头有一个“?”。
3.hash: 包含块标识符的DOMString，开头有一个“#”。

window.location, window.document.location 和 window.history 改变路径的区别
详情

history 主要解决的问题：调用pushState, replaceState方法时没有事件能够监听，通过监听onpopstate,hashchange来调用回调函数，调用暴露出去的push，replace方法时则调用回调函数，从而实现所有路由更改时的事件监听

history - 5.0.0 （hash 也支持 state, 不接收 basename 等参数）

导出的方法有：
createBrowserHistory
createHashHistory
createMemoryHistory
createPath
parsePath

1. createBrowserHistory（）返回了一个对象，主要有这几个方法：
   push
   replace
   listen
   
   改变路径的两个途径：
   1.通过浏览器的前进后退和更改地址栏，createBrowserHistory 方法中通过添加 popState事件，监听了路径的变化，调用了 handlePop 函数 ( applyTx 执行注册的 listen 的回调函数 )
   2.通过调用 push，replace，go，back，forward 方法更改路径，调用 原生 pushState， replaceState方法，并且调用 applyTx ( 执行注册的 listen 的回调函数 )

途径1的 state 值的问题：
通过 pushSate, replaceState 跳转的 state 的值为 传入的值，浏览器的回退和前进获取的是 history 栈顶的 state, 具体的值取决于这个页面是 通过 pushState, replaceState跳转过来的还是通过浏览器地址栏的更改，通过地址栏的更改，state的值为 null

2.createHashHistory() 和 createBrowserHistory 相比多了一个对 hashChange 事件的监听

3. createPath（{pathname = ‘/’, search = ’ ', hash = ’ '}) 方法返回了一个带hash,search的路径

4. parsePath（path）方法根据完整的路径，返回{pathname: ’ value’, hash: ‘value’, search: ‘value’}的对象

history - 4.9.0
4.9.0 版本为 js ，比 5.0.0 多了两个导出方法 createLocation, locationsAreEqual
**1.createLocation（path, state, key, currentLocation）**将path, state, key, currentLocation参数的值合并为一个新的location对象


2.locationsAreEqual（a, b）判断两个location对象是否相等，返回布尔值