如何通过前端路由技术实现单页应用（SPA）？

Question

如何通过前端路由技术实现单页应用（SPA）？

Answer 1

这个简单的路由类通过 pushState 和 popstate 事件来实现前端路由。

示例代码**：

class Router {
    constructor() {
        this.routes = {};
        window.addEventListener('popstate', this.handlePopState.bind(this));
    }

    addRoute(path, callback) {
        this.routes[path] = callback;
    }

    navigate(path) {
        history.pushState({}, '', path);
        this.handlePopState();
    }

    handlePopState() {
        const path = window.location.pathname;
        if (this.routes[path]) {
            this.routes[path]();
        }
    }
}