實現原理
1. 利用hash和history這兩種模式的底層api實現對路經的切換
2. 根據匹配到的路徑，渲染對應的組件
hash模式原理
通過監聽 hashchange 事件， 在回調裏拿到 window.location.hash 的值
hash 模式演示
<body>
<a href="#/a">去a</a>
<a href="#/b">去b</a>
<div id="box"></div>
</body>
<script>
let dom = document.getElementById('box');
// 當hash 值變化， 就會執行回調
window.addEventListener('hashchange', function () {
let hash = location.hash;
dom.innerHTML = hash;
});
</script>
hash模式原理
利用History_API，進行路由切換, 在mdn上提到了history棧
說明它的存儲形勢是個棧結構
使用的Api：
1. history.pushState(stateObject, title, url) 用於路徑的跳轉(也就是向history棧添加數據)
2. history.replaceState() 用於修改棧中某個記錄的數據
3. onpopstate: 每當活動的歷史記錄項發生變化時， popstate 事件都會被傳遞給window對象
<body>
<button onclick="goA()">a頁面</button>
<button onclick="goB()">b頁面</button>
<button onclick="goC()">c頁面</button>
<div id="box"></div>
</body>
<script>
let dom = document.getElementById('box');
function goA() {
// 傳入3個參數：路由參數或自定義的數據， title的標題，要跳轉的路徑
history.pushState({ page: 'A' }, 'a頁面', '/a');
dom.innerHTML = 'a 頁面';
}
function goB() {
history.pushState({ page: 'B' }, 'b頁面', '/b');
dom.innerHTML = 'b 頁面';
}
function goC() {
history.pushState({ page: 'C' }, 'c頁面', '/c');
dom.innerHTML = 'c 頁面';
}
// 當用戶點擊瀏覽器的後退按鈕時，觸發操作
window.onpopstate = (e) => {
console.log(e.state);
if (e.state.page === 'A') {
history.pushState(null, null, document.URL);
}
};
</script>