导语
联系实际开发，路由使用两种模式
- hash 模式
- history 模式
下面结合这两种模式，描述一下他们所用了哪些宿主环境的 API
一、 history 环境使用的 API
history 模式下对应的 this.history 对象为 HTML5History
源码中使用了
- window.addEventListener('popstate',()=>{})
- window.history.go()
- window.history.replaceState()
- window.history.pushState()
- window.location.search
1. popstate
当活动历史记录条目更改时，将触发 popstate 事件。如果被激活的历史记录条目是通过对history.pushState()的调用创建的，或者受到对history.replaceState()的调用的影响，popstate 事件的 state 属性包含历史条目的状态对象的副本。
window.addEventListener('popstate',e=>{console.log(e.state)})
2. history
history 存在于宿主环境(浏览器)，用于保存用户上网的历史记录的对象。从窗口打开的那一刻开始，就已经存在。
每一个浏览器窗口，标签页都有自己的 history 对象。该对象与 window 对象关联。
出于安全考虑，开发者无法得到用户的浏览记录
1.1. go(param1)
概述 : 使用该方法可以在用户的历史记录中任意跳转，可以实现向后或向前的效果。
参数 :
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| param1 | number/string | null | 表示向后向前跳转页面数。 当为字符串时，此时浏览器会跳到包含该字符串最近的一个位置。 如果找不到，则不跳转 |
示例
例 1 : 后退与前进
//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);
例 2 : 使用字符串跳到最近的一个 url
//跳转到最近的 wrox.com 页面
history.go("wrox.com");
//跳转到最近的 nczonline.net 页面
history.go("nczonline.net");
1.2 back()
描述 : 使用该方法可以后退一页
1.3 forward()
描述 : 使用该方法可以前进一页
1.4 pushState(state|title|url)
描述 : 使用该方法可以创建一个新的 url 记录，但不会跳转。
参数 :
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| state | object | null | 状态对象，即 history.state 对象，每次写入都会覆盖该对象 |
| title | string | null | 标题 |
| url | string | 当前 url | 该参数定义了一个新的历史 url 记录，可以为绝对路径 也可以为相对路径，但必须同源，否则会抛出异常 |
1.5 replaceState(state|title|url)
描述 : 使用该方法可以替换当前 url 记录，但不会跳转。参数同上
1.6 length
描述 : 该属性保存历史记录数据，这个数量包括前进后退的数量，初始值为 0
1.7 state
描述 : 使用 pushState 或者 replaceState 可以保留相关信息在该引用上
兼容性
二、Hash 模式使用的 API
hash 模式对应 HashHistory
HashHistory 使用了以下宿主环境的 API :
- window.addEventListener('hashchange',()=>{})
- window.location.hash
- window.location.replace()
1. onhashchange
描述 : 当锚部分发生变化时执行 JavaScript:
2. window.location.hash
描述 : 返回 URL 中的 hash(#号后跟的 0 或多个字符)，如果 URL 不包含散列值，则返回''
3. window.location.replace()
描述 : 该方法可以替换当前文档，并且不能返回上一个页面。
例子 :
window.location.replace("http://www.w3school.com.cn");
兼容性
