简单的 JavaScript 路由器

在 Web 开发中，路由器是必不可少的组件。它实现了 URL 与页面之间的映射，使得用户可以通过 URL 访问不同的页面。本文将介绍如何使用 JavaScript 实现一个简单的路由器。

实现原理

路由器的实现原理很简单，就是监听 URL 变化的事件（通常是 hashchange 事件），然后根据 URL 映射到对应的页面。具体实现步骤如下：

1. 监听 hashchange 事件
2. 获取当前 URL 的 hash 值
3. 根据 hash 值获取对应的页面
4. 显示该页面

实现代码

下面是一个简单的路由器实现（使用了 jQuery）：

$(window).on('hashchange', function () {
    // 获取当前 URL 的 hash 值
    var hash = window.location.hash;
    // 映射到对应的页面
    switch (hash) {
        case '#/home':
            showHome();
            break;
        case '#/about':
            showAbout();
            break;
        default:
            show404();
            break;
    }
});

// 显示首页
function showHome() {
    $('#content').html('<h1>Home Page</h1>');
}

// 显示关于页面
function showAbout() {
    $('#content').html('<h1>About Page</h1>');
}

// 显示404页面
function show404() {
    $('#content').html('<h1>404 Page</h1>');
}

// 初始化路由器
$(document).ready(function () {
    // 手动触发一次 hashchange 事件
    $(window).trigger('hashchange');
});

在这个路由器实现中，我们监听了 hashchange 事件，获取当前 URL 的 hash 值。然后，根据 hash 值映射到对应的页面，显示该页面的内容。

扩展

以上实现还比较简单，我们还可以添加一些扩展功能，比如：

• 支持动态路由
• 支持嵌套路由
• 支持传递参数

这些扩展功能需要更复杂的路由器实现，如果感兴趣可以自己深入研究。

总结

路由器是 Web 开发中必不可少的组件。本文介绍了如何使用 JavaScript 实现一个简单的路由器，实现了 URL 与页面之间的映射。在实际开发中，我们可以根据需要扩展路由器的功能，以满足实际需求。