hash模式
hash模式是监听 hashchange 事件来实现的。
-
监听事件
用window.addEventListener监听hashchange事件 - 设置html模板
-
获取hash路径
用window.location.hash.substring(1)获取路径 -
设置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。
不过我没学过设计模式，这个看不懂，你们自己看一下，看看下面的这个简单的方法。
创建PopStateEvent事件。
实例化一个PopStateEvent对象，传入popstate事件名和state对象。
PopStateEvent可以封装成一个方法方便replaceState使用触发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");
