<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hash路由</title>
</head>
<body>
<div id="root" style="border:3px solid red;height:200px"> </div>
<button onclick="push('/a')">/a</button>
<button onclick="push('/b')">/b</button>
<button onclick="push('/c')">/c</button>
<script>
let container = document.getElementById('root');
//监听弹出状态的事件 浏览器上的后退按钮
window.onpopstate = function (event) {
//console.log(event);
container.innerHTML = event.state.to;
}
// 自定义实现压栈状态的事件，这个事件window上是没有的
function push(to) {
// 参数一 状态
// 参数二 标题 没有用到
// 参数三 跳转的路径
window.history.pushState({to},null,to)
}
// 覆写window.history.pushState方法
// 1.先保存一下原有的方法
const pushState = window.history.pushState;
// 2.覆写
window.history.pushState = function(state,title,url){
// 3.调用系统的该方法
pushState.call(window.history,state,title,url);
// 4.调用自定义的onpushstate事件
window.onpushstate(state,title,url)
}
// 5.将事件定义在window属性上 浏览器的前进按钮
window.onpushstate = function(state,title,url) {
container.innerHTML = state.to || url
}
</script>
</body>
</html>