前端路由:一种是 Hash,一种是 HTML5 推出的 History API。1. Hash 路由主要通过监听 URL 中的 hashchange 来捕获具体的 hash 值进行检测。=================window.addEventListener('hashchange', function() { // 上报【进入页面】事件}, true)=================2. History 利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法进行路由切换,是目前主流的无刷新切换路由方式。=================// 第一阶段:我们对原生方法进行包装,调用前执行 dispatchEvent 了一个同样的事件function aop (type) { var source = window.history[type]; return function () { var event = new Event(type); event.arguments = arguments; window.dispatchEvent(event); var rewrite = source.apply(this, arguments); return rewrite; };}// 第二阶段:将 pushState 和 replaceState 进行基于 AOP 思想的代码注入window.history.pushState = aop('pushState');window.history.replaceState = aop('replaceState'); // 更改路由,不会留下历史记录// 第三阶段:捕获pushState 和 replaceStatewindow.addEventListener('pushState', function() { // 上报【进入页面】事件}, true)window.addEventListener('replaceState', function() { // 上报【进入页面】事件}, true)