由于history提供的pushState, replaceState可以改变url，同时保持浏览器不刷新，并且通过popstate监听浏览器历史记录的方式，完成一系列的异步动作。
<body>
<a data-href="/home">首页</a>
<a data-href="/my">我的</a>
<script type="text/javascript">
//定义路由数组
const Router = [];
//添加路由方法
const addRoute = (path = '',handle = () => {}) => {
let obj = {
path,
handle
}
Router.push(obj)
}
//添加路由定义
addRoute('/my',function(){
console.log("我的")
})
addRoute('/home',function(){
console.log("首页")
})
//路由处理函数
const routeHandle = (path) => {
Router.forEach((item,index)=>{
if(item.path == path){
history.pushState(null, null, "#"+path);
item.handle.apply(null, [path]);
return true;
}
})
return false;
}
//点击a标签传递参数
document.addEventListener("click",function(e){
var path = e.target.dataset.href;
if(path){
if(routeHandle(path)) {
//阻止默认行为
e.preventDefault();
}
}
})
</script>
</body>
网友评论