js实现路由hash和history模式

hash模式

hash模式是监听 hashchange 事件来实现的。

1. 监听事件
   用 window.addEventListener 监听 hashchange 事件
2. 设置html模板
3. 获取hash路径
   用 window.location.hash.substring(1) 获取路径
4. 设置html
   然后根据hash路径获取html模板，设置页面，hash模式完成

window.addEventListener("hashchange", function(event) {
    console.log(event.newURL);
    console.log(event.oldURL);
    
    let template = {
        "/hello": "<h1>hello</h1>",
        "/": "<h1>home</h1>"
    };
    let path = window.location.hash.substring(1);
    document.body.innerHTML = template[path] || "<h1>404</h1>";
})

history模式

hash是监听 popstate 事件来实现的，但有点小问题需要处理一下。
history.replaceState 和 history.pushSstate 不触发 popstate 事件，这个问题可以自定义一个方法来实现。

网上有一个方法，叫订阅-发布模式，https://juejin.cn/post/6844903790508933133。
不过我没学过设计模式，这个看不懂，你们自己看一下，看看下面的这个简单的方法。

1. 创建PopStateEvent事件。
   实例化一个 PopStateEvent 对象，传入popstate 事件名和 state 对象。
   PopStateEvent 可以封装成一个方法方便 replaceState 使用

2. 触发popstate事件
   用 window.dispatchEvent 传入刚刚实例化的PopStateEvent对象，然后就可以触发 popstate 事件了。
   触发前记得执行一下 history.replaceState 或者 history.pushSstate 方法

let path = window.location.pathname;

window.addEventListener('popstate', (e) => {
    let oldURL = path;
    let newURL = window.location.pathname;
    path = newURL;
    
    console.log(oldURL);
    console.log(newURL);
});

function createPopStateEvent(state, title) {
    return new PopStateEvent("popstate", {
        state: state,
        title: title
    });
}

window.history.addState = function(state, title, url) {
    window.history.pushState(state, title, url);
    window.dispatchEvent(createPopStateEvent(state, title))
}

// history.addState({ hello: "你好" }, null, "/hello");
// history.addState({ userName: "张三" }, "", "/user");