导语

联系实际开发，路由使用两种模式

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 可以保留相关信息在该引用上

兼容性

image.png

二、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");

兼容性