hash
最开始是做锚点,实现上下跳转,特点是改变url不会刷新页面,通过window.location.hash进行路由的跳转,通过hashchange监听路由的变化,如果哈希值与组件路由的path,相等,就进行组件的写入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ui>
<li data-url="/aa">aaa</li>
<li data-url="/bb">bbb</li>
<li data-url="/cc">vvv</li>
</ui>
<div>我是内容:</div>
<h1>q</h1>
</body>
<!-- hash -->
<script>
let routeDate=[{path:'/aa',pathData:'我是a'},{path:'/bb',pathData:'我是b'},{path:'/cc',pathData:'我是v'}]
let path
for(let i = 0;i<routeDate.length;i++){
document.querySelectorAll('li')[i].onclick=function(){
console.log(this.getAttribute('data-url'));
path=this.getAttribute('data-url')
window.location.hash=path
}
}
window.onhashchange=function(){
routeDate.map(item=>{
if(item.path==path){
document.querySelector('div').innerHTML=item.pathData
}
})
}
</script>
</html>
history
pushstate(state,title,url)有三个参数,添加到历史记录
state,可以在popstate事件触发时,以回调的方式,传入数据
title,新页面的标题,浏览器都忽略
url,新的地址
前进后退需要通过popstate,去实现跳转(history.go原理)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ui>
<li data-url="/aa">aaa</li>
<li data-url="/bb">bbb</li>
<li data-url="/cc">vvv</li>
</ui>
<div>我是内容:</div>
<h1>q</h1>
</body>
<!-- hash -->
<script>
let routeDate=[{path:'/aa',pathData:'我是a'},{path:'/bb',pathData:'我是b'},{path:'/cc',pathData:'我是v'}]
let path
for(let i = 0;i<routeDate.length;i++){
document.querySelectorAll('li')[i].onclick=function(){
path=this.getAttribute('data-url')
history.pushState(null,null,path)
changeText(path)
}
};
let changeText=function(path){
routeDate.map(item=>{
if(item.path==path){
document.querySelector('div').innerHTML=item.pathData
}
})
}
window.onpopstate=function(){
changeText(location.hash)
}
</script>
</html>