当hash部分修改，能触发hashchange事件。hashchange + 锚地 + innerHTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="#/login">登录</a>
<a href="#/register">注册</a>
<a href="#/">Home</a>
<div id="app"></div>
<script>// 当hash部分修改，能触发hashchange事件
/*
window.addEventListener('hashchange', function(){
console.log(location.hash);
});
*/
// router
let app = document.querySelector('#app');
window.addEventListener('hashchange', function(){
router();
});
function router(){
switch (location.hash) {
case "#/login" :
app.innerHTML = '<h1>这是登录页面</h1>';
break;
case "#/register" :
app.innerHTML = '<h1>这是注册页面</h1>';
break;
default:
app.innerHTML = '<div>Welcome Home</div>';
break;
}
}
router();
</script>
</body>
</html>
