一、什么是hash路由
1、为地址栏中的 # 符号，比如这个 URL：http://www.abc.com/#/home，hash 的值为 #/home，请求的时候如果不特意加上，不会被带到服务器
2、hash刷新时，页面不会向服务器发送请求，因此改变 hash 不会重新加载页面。
3、每次hashchange的时候，利用window.onhashchange 监听，会在浏览器的访问历史中增加一个记录，所以可以通过浏览器的前进后退来管理页面。核心就是利用location.hash 和hashchange event去实现的前端路由跳转，同时链接上会有一个#号
具体的方法为：
// 在跳转后会得到跳转前和当前url
window.onhashchange = (e) => {
console.log(e.oldUrl, e.newUrl);
}
// 这样就可以触发hashchange回调了
location.hash = '#test';
二、什么是history路由
1、是一个常规的链接，没有#符号
2、hisotry的请求在每次刷新都会向服务器去请求，除了pushState和replaceState
3、popState不能监听到pushState和replaceState的事件
history —— 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）
4、刷新页面向服务器请求资源，资源不存在会404，服务器要兜底
5、pushState() 和 replaceState() 方法这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。执行后，页面的地址会变化，页面还是原来的页面不会发生变化。
三、两者的区别
1、hash路由链接有hash（#），并且是一个纯客户端路由（路由文件不需要通过nginx配置），history链接一般没hash，需要服务端进行兜底操作，否则页面会404（一般的处理方法是，在路由文件里配置找不到对应的路由时，统一跳转到404页面，这个配置放在路由文件的最后）
2、api不同，hash路由监听hashchange，history监听popstate，并且history有提供比较多api进行页面跳转管理，hash需要自己去管理这些堆栈
//当hash和history模式进行混用时
https://127.0.0.1/#/login?a=hello
hash: "#/login?a=hello"
search: ""
https://127.0.0.1/?a=hello#/login
hash: "#/login"
search: "?a=hello"
3、hash路由对seo不友好
四、解决方法
我们首先完成一个订阅-发布模式，然后重写history.pushState, history.replaceState,并添加消息通知，这样一来只要history的无法实现监听函数就被我们加上了事件通知，只不过这里用的不是浏览器原生事件，而是通过我们创建的event-bus 来实现通知，然后触发事件订阅函数的执行。
1、订阅-发布模式
class Dep { // 订阅池
constructor(name) {
this.subs = [] //该事件下被订阅对象的集合
}
defined(watch) {
this.subs.push(watch)
}
notify() { //通知订阅者有变化
console.log('this.subs',this.subs)
this.subs.forEach((e, i) => {
if (typeof e.update === 'function') {
try {
e.update.apply(e) //触发订阅者更新函数
} catch (err) {
console.error(err)
}
}
})
}
}
class Watch {
constructor(name, fn) {
this.name = name; //订阅消息的名称
this.callBack = fn; //订阅消息发送改变时->订阅者执行的回调函数
}
add(dep) { //将订阅者放入dep订阅池
dep.subs.push(this);
}
update() { //将订阅者更新方法
var cb = this.callBack; //赋值为了不改变函数内调用的this
cb(this.name);
}
}
2、重写history方法，并添加window.addHistoryListener事件机制。添加event-bus即可，代码如下：
function addMethod() {
let historyDep = new Dep();
return function (name) {
if (name === 'historychange') {
return function (name, fn) {
let event = new Watch(name, fn)
historyDep.defined(event);
}
} else if (name === 'pushState' ) {
let method = history[name];
return function () {
console.log('pushState','arguments',arguments[2])
method.apply(history, arguments);
historyDep.notify();
}
}else if ( name === 'replaceState') {
let method = history[name];
return function () {
console.log('replaceState','arguments',arguments[2])
method.apply(history, arguments);
historyDep.notify();
}
}
}
}
let addHistoryMethod = new addMethod()
window.addHistoryListener = addHistoryMethod('historychange');
history.pushState = addHistoryMethod('pushState');
history.replaceState = addHistoryMethod('replaceState');
重写之后、在页面上
window.addHistoryListener('history',function(){
//注意这个方法只要路由发生变化就会被触发
console.log('窗口的history改变了');
})
//如果想一进入页面，window.addHistoryListener就能监听到，加入这句话
window.pushState(null,null,window.location.href)
五、一个小的业务场景
当用户进入一个页面按手机系统自带的返回按钮时，弹出一个挽留框，并阻止用户跳出这一行为。
解决方案
1、在进入当前页面时，通过pushState(null,null,window.location.href)，在history栈中增加一条和当前路径相同的地址
2、当用户点击返回时，会触发window.onpopstate ，让pushState行为在用户要返回时被popState监听到，此时弹出挽留框，页面还是之前的页面没有变化。
window.onpopstate = function(){
//一进入页面时并不会触发这个方法，只有页面地址要更改
后才可以触发，此时可以监听到pushState事件
//显示挽留弹窗
}
window.history.pushState(null,null,window.location.href)
测试发现问题
在安卓手机上，页面打开后，如果用户点击了页面，onpopstate事件监听就能正常触发。如果页面打开无任何操作（单纯滑动也不行），直接按android返回按钮。事件回调就没触发，直接退出了。ios没有问题。很多人遇到了这个问题，目前还没有解决，妥协的方案是诱导用户进行点击页面的操作。
六、参考文章
1、https://juejin.cn/post/6844903790508933133
2、https://juejin.cn/post/6890716016033628173
网友评论