hash和history实现原理

一、hash

1、特点：地址后面带#，地址切换不会导致页面请求
2、事件：当路由#后面的部分被修改时，会触发 hashchange 的监听，但需要注意的是，pushState、replaceState修改的路由不会被监听到。

 window.addEventListener("hashchange", (event) => {
     console.log("hashchange", event);
 });

二、history

1、特点：地址后面没有#
2、使用：pushState(state, unused, url) 新增一条历史记录，eplaceState(stateObj, title[, url]) 替换当前记录
3、事件：当进行浏览器的前后后退时，触发popstate()

 window.addEventListener("popstate", (event) => {
     console.log("popstate", event);
 });

api包括

history.pushState() //新增一个历史记录
history.repalceState() //替换当前的历史记录
window.history.back()//后退
window.history.forward()//前进
window.history.go(1)//前进一部，-2回退两步，window.history.length可以查看当前历史堆栈中页面的数量