# 前端路由
# 路由类型
Hash
History
# Hash模式
url：url上携带 #，随后为 hash值
特点：不会向服务器发送请求
# Api
location.hash 可以获取 hash值
# 事件
hashchange 会在 hash值 变化时触发
# History模式
url：url上无 #
特点：向服务器发送请求（当匹配不到资源时，需重定向到前端页面兜底）
# Api
history对象
pushState：添加一条路由记录replaceState：修改当前路由记录go(n)：跳转 n 步（n可以为正负数）back()：后退（等价于go(-1)）forward()：前进（等价于go(1)）
没有
popState这个Api
# 事件监听
pushState、replaceState 不会触发 popstate事件
只有浏览器上的前进/回退、JS 执行
history.back()才会触发
# 重写pushState、replaceState事件
原理：重写 history.pushState、history.replaceState，让它们在执行后自动触发一个 “自定义事件”；
需提前监听这个 “自定义事件”。
const _wr = type => {
const origin = history[type];
return function () {
const event = new Event(type);
event.arguments = arguments;
window.dispatchEvent(evet);
return origin.apply(this, arguments);
}
}
history.pushState = _wr('pushState');
history.replaceState = _wr('replaceState');
// 事件监听
window.addEventListener('pushState', e => {});
window.addEventListener('replaceState', e => {});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 参考
← 浏览器基础 AudioContext →