<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--路由：在不发送HTTP请求的情况下对页面进行刷新-->
<!--hash:页面中hash的变化不会发送http请求，我们可以根据hash值的变化来实现路由功能-->
<ul class="list">
<li><a href="#/red">红</a></li>
<li><a href="#/green">绿</a></li>
<li><a href="#/blue">蓝</a></li>
</ul>
<script>
class Route{
constructor(){
this.route={};
this.currentUrl='';
//在对象创建的时候就监听hash值的变化，防止hash变化但是没有捕捉到
window.addEventListener('hashchange',this.refresh.bind(this),false);
}
router(path,callback){
this.route[path]=callback || function () {};
}
//定义refresh方法，监测页面变化，对页面进行刷新
//1、保存当前页面的hash值
//2、根据hash值，去执行route对象保存的路由信息
refresh(){
let hash=location.hash.slice(1);
console.log(hash);
//根据hash值去执行route中的路由信息
this.route[hash]();
}
}
let list=document.querySelector(".list")
let Router=new Route();
Router.router('/red',function () {
list.style.background='red';
});
Router.router('/green',function () {
list.style.background='green';
});
Router.router('/blue',function () {
list.style.background='blue';
});
</script>
</body>
</html>
网友评论