web 路由 (hash和history)知识备忘

URL 分解图示

hash 机制

特性

1. 如上图所示，url 中带有#的后部分为hash内容，用于记录浏览器状态，而不会发送请求至服务端，即

www.google.com/#/user => http请求：www.google.com   

2. hash值的更改，不会导致页面的刷新，纯SPA单页面应用
3. hash值的更改，在浏览器增加记录，即可通过浏览器返回、前进控制hash的切换
4. hash值的更改，会触发hashchange事件

window.addEventListener('hashchange', () => {})

更改hash

// 1. location.hash
location.hash = '#abc'
// 2. html标签跳转
<a href="#user">跳转至user</a>

history

// https://developer.mozilla.org/zh-CN/docs/Web/API/History_API
window.history.back(); // 后退
window.history.forward(); // 前进
window.history.go(-3); // 接收number参数，后退三个页面

// 页面的浏览记录栈里添加一个历史记录
window.history.pushState(null /* 序列化对象 */, null /* 标题，暂没用 */, url);
// 替换当前历史记录
window.history.replaceState(null, null, url);
let numberOfEntries = window.history.length

注意: 调用history.pushState()和history.replaceState()不会触发popstate事件

监听路由变化函数

window.onpopstate = fn
window.addEventListener('popstate', () => {})

触发时机:

1. 浏览器前进、后退按钮
2. history API(back、forward、go)