写在前面
前几天遇到一个需求，原生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);
});
