1.router路由管理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>router</title>
</head>
<body>
<script>
//历史管理
//路由 路径->路由 获取路由 对路由进行分发
//页面路由会进行跳转window.location.href = 'http://hao123.com'
/*
hash路由，不会跳转，能够实现无刷新的页面的功能
利用的框架打包上线，都会用hash
如果页面，也就意味者所有的数据要重新进行渲染，
如果不用hash路由，那么路由要在服务端进行渲染(如果没有服务端渲染，那么刷新页面，就会出现404)
前端的框架都遵循前后端分离的思想
*/
window.location.hash = '#home';
//H5
window.history.pushState('name','无效的标题','/path'); //推进一个历史状态
//替换一个历史状态
window.history.replaceState('name','无效的标题','/path');
</script>
</body>
</html>
2.历史管理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>历史管理</title>
<style>
*{
margin:0;
padding:0;
}
body{
background:#ddd;
-webkit-user-select:none;
user-select:none;
}
li{
list-style:none;
}
#box{
width: 80%;
height: 500px;
border:1px solid white;
margin: 150px auto 0;
display:flex;
justify-content: space-around;
align-items:center;
text-align:center
}
ul{
width: 150px;
}
li{
line-height: 35px;
border:1px solid #000;
margin-bottom: 15px;
}
#con{
width: calc( 80% - 200px );
height: 300px;
border:1px solid white;
}
</style>
</head>
<body>
<div id='box'>
<ul id='list'></ul>
<div id='con'></div>
</div>
<script src="data.js"></script>
<script>
let con = document.getElementById('con');
let str = '';
for(let key in data){
str += '<li data-name="'+key+'">'+key+'</li>'
}
list.innerHTML = str;
let aLi = document.querySelectorAll('li');
aLi.forEach(function (item,index) {
item.onclick = function () {
console.log(this.dataset['name']); //打印key
console.log(data[this.dataset['name']]); //打印value
console.log(window.history); //历史管理
//点击li添加历史记录，有历史记录就可以，点击前进后退按钮
let name = decodeURI(this.dataset['name']); //进行解码，防止中文报错
if(window.history&&window.history.pushState){
//追加哈希路由管理
window.history.pushState(name,'追梦','#path='+name);
}
}
});
//点击前进 后退按钮
window.onpopstate = function (e) {
console.log(e.state); //打印key值
if(e.state){
con.innerHTML = data[e.state];
}
}
window.onhashchange = function () {
console.log(window.location.hash);
}
// 在PC ‘移动端 浏览器 都有 前进后退的按钮
// 但是 app 里没有的
// app 都是div模拟的
// 点击div 去实现返回上一个页面 或 去到下一页面 自己写
// window.history.go( -1 ) 这是后退按钮
// window.history.go( 1 ) 这是前进按钮
// window.history.go( 0 ) 这是刷新页面
// window.history.back() 返回上一个页面
// window.history.forward() 去到下一个页面
</script>
</body>
</html>