hash路由實現原理
路由（routing）: 根據路徑決定前端顯示的視圖
實現常規頁面跳轉：
9.hash01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav>
<a href="9.hash01.html"></a>
<a href="10.hash02.html"></a>
<a href="11.hash03.html"></a>
</nav>
<div>
這是第一個視圖
</div>
</body>
</html>
10.hash02.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav>
<a href="9.hash01.html"></a>
<a href="10.hash02.html"></a>
<a href="11.hash03.html"></a>
</nav>
<div>
這是第二個視圖
</div>
</body>
</html>
11.hash03.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav>
<a href="9.hash01.html"></a>
<a href="10.hash02.html"></a>
<a href="11.hash03.html"></a>
</nav>
<div>
這是第二個視圖
</div>
</body>
</html>
用hash實現頁面跳轉
注意：超級鏈接（a標籤），又叫命名錨記。命名錨記像一個迅速定位器一樣是一種頁面內的超級鏈接，運用相當普遍。在JS中hash就是在html中錨點。
先看看什麼是hash！！！
window.onhashchange：監聽location中的hash變化了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav>
<a href="#view1">視圖1</a>
<a href="#view2">視圖2</a>
<a href="#view3">視圖3</a>
</nav>
<div>
這是第一個視圖
</div>
<script>
// 監聽location中的hash變化了
window.onhashchange = ()=>{
console.log(location.hash);
};
</script>
</body>
</html>
現在用hash實現頁面跳轉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<nav>
<a href="#view1">視圖1</a>
<a href="#view2">視圖2</a>
<a href="#view3">視圖3</a>
</nav>
<div id="view">
這是第一個視圖
</div>
<script>
{
let view = document.querySelector("#view");
window.onhashchange = setView;
function setView(){
let hash = location.hash;
console.log(hash);
switch (hash) {
case "#view1":
view.innerHTML = "這是第一個視圖";
break;
case "#view2":
view.innerHTML = "這是第二個視圖";
break;
case "#view3":
view.innerHTML = "這是第三個視圖";
break;
default:
break;
}
}
}
</script>
</body>
</html>
好了！這就用hash實現了一個頁面內的跳轉。
目前較爲熱門的hashrouter，小迪將在後面的篇章闡述！
（後續待補充）