重写history.pushState添加自定义事件

1. 添加自定义事件的方法

var event = new CustomEvent('xxx', { detail: {...略});

注意要dispatch一下:

window.dispatchEvent(event);

2. 使用自定义事件

// 监听路由变化
        window.addEventListener("my-popstate", ev => {
            console.log("my-popstate:", ev)
            const detail = ev.detail;

                ...略
        })
    

3. 重写history.pushState添加自定义事件

const oriPushState = history.pushState;
// 重写pushState
history.pushState = function (state, title, url) {
    // 触发原事件
    oriPushState.apply(history, [state, title, url]);
    // 自定义事件
    var event = new CustomEvent("my-popstate", {
        detail: {
            state,
            title,
            url
        }
    });
    window.dispatchEvent(event);
}

4. 使用"my-popstate"自定义事件:

// 监听路由变化
    listenerHistory() {
        // 导航的路由切换
        window.addEventListener("popstate", ev => {
            console.log("onpopstate:", ev)
            const url = location.pathname.endsWith(".html") ? "/" : location.pathname;
            // todo
        });
        // pushState或者replaceState
        window.addEventListener("my-popstate", ev => {
            console.log("my-popstate:", ev)
            const detail = ev.detail;
            // todo
        })
    }