使用原生 JavaScript 实现页面路由效果

最近把手头的东西都去了 jQuery 的依赖，去掉之后，想给我一个使用 JavaScript 渲染列表的站，加上个路由，但这个站用的还不是 Vue，用不了 vue-router，于是找到了如下方式，使用原生 JavaScript，来达到类似的 URL 展示效果。

document.addEventListener('DOMContentLoaded', function () {
    // 初始加载
    loadContentFromHash();

    // 监听 URL 变化事件
    window.addEventListener('hashchange', function () {
        loadContentFromHash();
    });
});

function loadContentFromHash() {
    // 获取当前 URL 的片段标识符
    var hash = window.location.hash;

    // 根据片段标识符加载对应内容
    switch (hash) {
        case '#/rec':
            reloadData('rec');
            break;
        case '#/all':
            reloadData('all');
            break;
        // 可以添加更多的片段标识符对应的处理逻辑
        // 如 case '#someother': doSomething(); break;
        default:
            // 默认处理
            break;
    }
}

这样的话，可以通过判断 URL 中的片段标识符（Fragment Identifier），来调用对应的方法来渲染不同的页面了。
上面的代码会在页面加载时初始化并加载当前 URL 的片段标识符对应的内容，并在 URL 发生变化时重新加载对应的内容。

比如，当访问domain.com/#/rec的时候，显示的是由reloadData('rec');所渲染的内容；当访问domain.com/#/all的时候，显示的是由reloadData('all');所渲染的内容。