wwwroot/lis/js/Router.js

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

/*
 * 模块：单页应用路由
 * 作者：cls
 * 日期：2021.04.17
 * 使用：var routes = [{ id: '' }, { id: 'index', title: '首页' }, { id: 'next', handle: function () { console.log("切换到next");} }]
 *       var router = new Router(routes);
 * 注意：不要对一个 router 进行多次 new Router()操作 。若要切换路由表使用 init() 方法即可
 */
function Router(routes, defaultRoute) {
    var othis = this;

    //路由初始化
    routes && othis.init(routes, defaultRoute);

    //绑定 hashchange 事件
    window.addEventListener("hashchange", function () {
        let route = location.hash.slice(1) || "";
        othis.oldRoute = othis.currentRoute;
        othis.currentRoute = route;
        othis.changePage(route);
    });
}

//初始化，可多次初始化
Router.prototype.init = function (routes, defaultRoute) {
    if (!routes || !routes.length) {
        console.error("Router初始化失败：routes错误！");
        return;
    }
    this.routes = routes;
    this.currentRoute = location.hash.slice(1) || defaultRoute || routes[0].id; //当前路由获取顺序
    this.oldRoute = "";
    location.hash || history.replaceState(null, null, '#' + this.currentRoute); //hash为空，切换当前hash
    this.changePage(this.currentRoute);
    this.oldRoute = location.hash.slice(1);
}

//切换路由
Router.prototype.push = function (route, callback) {
    //获取route
    switch (typeof (route)) {
        case "string":

            break;
        case "number":
            route = this.routes[route] || "";
            break;
        case "object":
            route = route.id || "";
            break;
        case "undefined":
        default:
            route = location.hash.slice(1) || "";
            break;
    }
    location.hash = route; //切换hash，接下来的事情交给hashchange去做。如果与上一次的route一致，不会触发hashchange事件
}

//切换页面：route为字符串，为空则隐藏所有路由
Router.prototype.changePage = function (route) {