通过JS拦截 pushState 和 replaceState 事件

写在前面
前几天遇到一个需求，原生js拦截vue项目中的路由变更。目的是单项目应用中，拦截路由变更，发送用户路由变更内容，用于了解用户网页使用情况，也就是数据统计。

首先需要知道vue框架路由变更原理
这里可以查看相关文章或者看vue源码，这里直接写结论，vue路由通过使用pushState 和 replaceState 方法来进行路由变更和替换的。所以只要拦截这两个方法就可以了。

var _wr = function(type) {
  var orig = history[type];
  return function() {
    var e = new Event(type);
    e.arguments = arguments;
    window.dispatchEvent(e);
    // 注意事件监听在url变更方法调用之前 也就是在事件监听的回调函数中获取的页面链接为跳转前的链接
    var rv = orig.apply(this, arguments);
    return rv;
  };
};
history.pushState = _wr('pushState');
history.replaceState = _wr('replaceState');
window.addEventListener('pushState', function(e) {
  var path = e && e.arguments.length > 2 && e.arguments[2];
  var url = /^http/.test(path) ? path : (location.protocol + '//' + location.host + path);
  console.log('old:'+location.href,'new:'+url);
});
window.addEventListener('replaceState', function(e) {
  var path = e && e.arguments.length > 2 && e.arguments[2];
  var url = /^http/.test(path) ? path : (location.protocol + '//' + location.host + path);
  console.log('old:'+location.href,'new:'+url);
});

参考资料
通过JS拦截 pushState 和 replaceState 事件