js实现hash路由
<!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>
<style>
#routerView {
width: 100px;
height: 100px;
background-color: #ff0
}
</style>
</head>
<body>
<div>
<a href="#/home">Home</a>
<a href="#/about">About</a>
</div>
<div id="routerView" >
</div>
<script>
var routerView = null;
var onDomContentLoadedHandle = () => {
routerView = document.getElementById('routerView');
// 页面加载完不会触发 hashchange,这里主动触发一次 hashchange 事件
onHashChangeHandle()
}
// 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完全加载。
window.addEventListener('DOMContentLoaded', onDomContentLoadedHandle);
var onLoadHandle = ()=>{
console.log(222);
}
//在文档装载完成后会触发 load 事件。此时,在文档中的所有对象都在DOM中,所有图片,脚本,链接以及子框都完成了装载。
window.addEventListener('load', onLoadHandle)
var onHashChangeHandle = (v) => {
// console.log(v.oldURL);
// console.log(v.newURL);
let hash = location.hash;
console.log('hash', hash);
switch (hash) {
case '#/home':
routerView.innerHTML = 'Home'
return;
case '#/about':
routerView.innerHTML = 'About'
return;
default:
break;
}
}
// 监听url中hash改变事件
window.addEventListener('hashchange', onHashChangeHandle)
window.addEventListener('beforeunload', () => {
window.removeEventListener('hashchange', onHashChangeHandle);
window.removeEventListener('DOMContentLoaded', onDomContentLoadedHandle);
window.removeEventListener('load', onLoadHandle)
})
</script>
</body>
</html>
js实现history路由
<!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>
<style>
#routerView {
width: 100px;
height: 100px;
background-color: #ff0
}
</style>
</head>
<body>
<div>
<a href="/home">Home</a>
<a href="/about">About</a>
</div>
<div id="routerView" >
</div>
<script>
var routerView = null;
var onDomContentLoadedHandle = () => {
routerView = document.getElementById('routerView')
onPopStateHandle();
const linkList = document.querySelectorAll('a[href]');
// 注册,拦截 点击事件,实现url变化,同时手动触发页面ui改变
linkList.forEach(el => {
el.onclick = (e) => {
e.preventDefault();
const path = el.getAttribute('href');
history.pushState({name: path}, path.slice(1), path)
onPopStateHandle()
}
})
}
// 当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件被触发,而无需等待样式表、图像和子框架的完全加载。
window.addEventListener('DOMContentLoaded', onDomContentLoadedHandle);
var onPopStateHandle = (v) => {
let path = location.pathname;
// console.log('path', path);
switch (path) {
case '/home':
routerView.innerHTML = 'Home'
return;
case '/about':
routerView.innerHTML = 'About'
return;
default:
break;
}
}
// 监听url中hash改变事件
window.addEventListener('popstate', onPopStateHandle)
window.addEventListener('beforeunload', () => {
window.removeEventListener('popstate', onPopStateHandle);
window.removeEventListener('DOMContentLoaded', onDomContentLoadedHandle);
})
</script>
</body>
</html>