下面是一個簡單的示例，展示如何使用pushState，popState和location.hash來實現(xiàn)一個簡單的小型路由：
var routes = {};
function route(path, callback) {
routes[path] = callback;
}
function handleRoute() {
var path = location.hash.slice(1);
if (routes[path]) {
routes[path]();
}
}
function navigateTo(path) {
history.pushState(null, null, '#' + path);
handleRoute();
}
window.addEventListener('popstate', handleRoute);
// 示例路由
route('/', function() {
console.log('Home page');
});
route('/about', function() {
console.log('About page');
});
// 處理初始路由
handleRoute();
在上面的代碼中，我們首先定義了一個routes對象，用來存儲不同路徑對應的回調函數(shù)。然后定義了一個route函數(shù)，用來注冊路徑和對應的回調函數(shù)。
在handleRoute函數(shù)中，我們從location.hash中獲取當前路徑，并檢查是否存在對應的回調函數(shù)。如果存在，就執(zhí)行對應的回調函數(shù)。
navigateTo函數(shù)用于導航到指定路徑。它會使用history.pushState方法來修改URL路徑，然后再調用handleRoute函數(shù)來執(zhí)行對應的回調函數(shù)。
最后，我們通過監(jiān)聽popstate事件來處理瀏覽器的前進后退操作，當用戶點擊瀏覽器的前進或后退按鈕時，會觸發(fā)popstate事件，我們可以在事件處理函數(shù)中重新執(zhí)行對應的回調函數(shù)。
在示例路由中，我們注冊了兩個路徑：'/'對應首頁，'/about'對應關于頁面。你可以根據(jù)自己的需求注冊更多的路徑和回調函數(shù)。
