不论是React却是Vue后端架构图形时，一般来说有hash和history三种路由器形式。hash路由器商业模式透过窃听url中hash变动图形相同的文本，它不能向服务器端允诺。history路由器商业模式是窃听url方向变动，须要应用程序和服务器端全力支持。
一、Hash路由器
hash路由器透过该事件hashchange窃听url中hash变动，在首度步入网页的这时候此该事件并不能继续执行，须要紧密结合load该事件监控首度读取的情形。那么接下去单纯PCB呵呵hashRouter。
class HashRouter {
// 现阶段方向URL
currentUrl = “”;
constructor() {
this.callback =
this.callback.bind(this);
window.addEventListener(“load”, this.callback);
window.addEventListener(“hashchange”, this.callback);
}
// 当hash变动的这时候继续执行的回调函数
callback() {
→ /home
let path =
this.getHashPath(location.hash);
this.currentUrl = path;
}
getHashPath(url) {
return url.slice(1);
}
}
二、History路由器
history路由器会使用到window.history对象的方法，它提供的方法使用操作浏览器的会话历史记录。它提供的方有：
back（）：
后退到浏览器会话历史上一次；
forward（）：
前进到浏览器会话历史下一次；
go（number）：
转到指定某一次浏览器会话历史，正数为前进，负数为后退；
pushState（state,title,url）：
前进到指定URL，会将URL数据push进会话历史中；
replaceState（state,title,url）：
将URL替换现阶段方向；
以上几种形式只会修改现阶段网页的URL，并不能发送允诺。刷新浏览器后，会向服务器端http网页允诺，因此如果使用history路由器商业模式，须要服务器端配置。
使用history路由器商业模式时，须要窃听路由器变动，window提供的有popstate该事件，但是这个该事件只能当back，forward，go三个方法继续执行的这时候才会继续执行，pushState和replaceState继续执行时并不能触发。针对这种情形可以使用window.dispatchEvnet去触发popstate该事件回调。
class HistoryRouter {
currentUrl = “”;
constructor() {
this.callback =
this.callback.bind(this);
this.addStateListener();
// 添加load及网页跳转继续执行的窃听
window.addEventListener(“load”, this.callback);
window.addEventListener(“popstate”, this.callback);
}
addStateListener() {
const listener = function
(type) {
let hisFn =
history[type];
return function () {
// 调用history的pushState，reaplaceState该事件
let fn =
hisFn.apply(this, arguments);
let e = new
Event(“popstate”);
e.arguments =
arguments;
// 透过window.dispatchEvent触发popstate该事件
window.dispatchEvent(e);
return fn;
};
};
window.history.pushState =
listener(“pushState”);
window.history.replaceState =
listener(“replaceState”);
}
callback() {
this.currentUrl =
location.pathname;
}
}
总结
hash路由器商业模式透过hashchange窃听hash变动，history商业模式下透过对pushState及replace方法重写，透过dispatchEvent调用popstate回调。
