如何用JavaScript实现哈希路由？

// 监听哈希变化
window.addEventListener('hashchange', function() {
    const hash = window.location.hash.slice(1); // 去掉#号
    // 根据哈希值加载相应的内容
    loadContent(hash);
});

// 加载内容的函数
function loadContent(hash) {
    switch(hash) {
        case 'home':
            document.body.innerHTML = '<h1>Welcome to Home</h1>';
            break;
        case 'about':
            document.body.innerHTML = '<h1>About Us</h1>';
            break;
        default:
            document.body.innerHTML = '<h1>404 Not Found</h1>';
    }
}

// 初始加载
loadContent(window.location.hash.slice(1) || 'home');

// 更复杂的哈希路由实现
const routes = {
    'home': '<h1>Welcome to Home</h1>',
    'about': '<h1>About Us</h1>'
};

function navigate(hash) {
    if (hash === '') {
        hash = 'home'; // 默认路由
    }

    const content = routes[hash] || '<h1>404 Not Found</h1>';
    document.body.innerHTML = content;

    // 更新URL但不刷新页面
    history.pushState(null, null, `#${hash}`);
}

window.addEventListener('popstate', function() {
    navigate(window.location.hash.slice(1));
});

// 初始加载
navigate(window.location.hash.slice(1));

// 提供一个导航函数，以便在代码中使用
function goTo(hash) {
    navigate(hash);
}

// 假设我们有一个导航菜单
document.getElementById('nav-home').addEventListener('click', function() {
    goTo('home');
});

document.getElementById('nav-about').addEventListener('click', function() {
    goTo('about');
});