前端开发中的路由,其实就是操作url地址
- 改变浏览器地址
- 内容区切换内容
hash的特点
- 改变url的时候, 不会刷新页面
- 当 一个窗口的 hash （URL 中 # 后面的部分）改变时就会触发 hashchange 事件（location.hash）。
- hashchange 用它来监听url路径变化
实现一个最简单的hash单页应用
- 事件委托
- window.location.hash改变
- hashchange事件监听
- 改变页面内容
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Title</title>
<style>
a,#divId{
font-size: 33px;
}
</style>
</head>
<body>
<ul id='shijianweituo'>
<li>
<a data-url='/aa'>
aaaa
</a>
</li>
<li>
<a data-url='/bb'>
bbbbb
</a>
</li>
<li>
<a data-url='/cc'>
ccccc
</a>
</li>
</ul>
<div id='divId'>默认内容</div>
<script>
var _path = '';
const pathData = [
{
path: '/aa',
pathData: 'aaaaa页',
},
{
path: '/bb',
pathData: 'bbbbbb页',
},
{
path: '/cc',
pathData: 'ccccc页',
},
];
let _aBtn = document.getElementsByTagName('a');
let _divId = document.getElementById('divId');
// 事件委托
document.getElementById('shijianweituo').addEventListener('click', function(e){
// 使用事件委托监听 li的监听事件
// 这样改下就只有点击li会触发事件了，且每次只执行一次dom操作，如果li数量很多的话，将大大减少dom的操作，优化的性能可想而知！
// https://www.cnblogs.com/lauzhishuai/p/11263210.html
_path = e.target.dataset.url; // 获取新路由
window.location.hash = _path; // 改变浏览器的# 号后的参数值
});
window.addEventListener('hashchange', function(){
pathData.find((y) => {
if(y.path === _path){
_divId.innerHTML = y.pathData;
return true;
}else{
return false;
}
})
});
</script>
</body>
</html>
|