手写简单history
主要方法,通过history.pushState({},'',path)实现
1.demo结构
2.app.js
const http = require('http')
const fs = require('fs')
http.createServer((req,res)=>{
fs.readFile('./index.html',(err,data)=>{
res.end(data)
})
}).listen(9001,()=>{
console.log('9001 启动成功')
})
3.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="user" onclick="toUrl('/user')">用户</button>
<button id="cart" onclick="toUrl('/cart')">购物车</button>
<span id="showTxt">
</span>
</body>
</html>
<script>
function toUrl(path)
{
let txt
switch(path){
case '/user':
txt = '用户页面';
history.pushState({},'',path);
break;
case '/cart':
txt = '购物车页面';
history.pushState({},'',path);
break;
}
document.getElementById('showTxt').innerText=txt
}
window.onload = ()=>{
window.addEventListener('popState',()=>{
alert(111)
})
let path = location.pathname
let txt
switch(path){
case '/user':
txt = '用户页面';
history.pushState({},'',path);
break;
case '/cart':
txt = '购物车页面';
history.pushState({},'',path);
break;
}
document.getElementById('showTxt').innerText=txt
}
</script>
4.运行截图