本篇文章主要讲解常见单页应用路由库的实现思路。通过其实现方法我们可以了解到一些浏览器的工作原理，并且深入学习理解一些平时不常用的API。
由于业务需要，我们要监控页面的访问次数。对于传统的多页应用来说，很简单，我们只需要在页面加载完毕后上报就可以了。但是对于单页应用来说就没那么简单了。首先我们要去搞清楚单页应用的一些原理，了解它是怎么实现的，以及我们如何去监听页面的变化。
SPA & MPA
SPA
SPA(Single Page Applications)，单页应用。指的是应用的不同模块/功能之间的切换都是在同一页面里面的。
通常不同模块之间的URL的hash会不一样。比如https://test.com/#/login，https://test.com/#/user
MPA
MAP(Multiple Page Applications)，多页应用。指的是应用的不同模块/功能都是不同页面之间呈现的。
通常不同页面都是不同的html，比如https://test.com/login.html，https://test.com/user.html
区别
一般单页应用拥有更好的用户体验，更快的页面切换速度。而多页应用的SEO更友好，拥有更快的首页加载速度。
SPA的实现原理
了解了单页应用之后，我们可以明确一点，就是单页应用的路由切换，是在同一页面下进行的。也就是说浏览器不会刷新/跳转页面。 但是它的URL确实是变化了(hash改变了)。也正是因为hash变化不会引起浏览器的刷新行为，所以SPA才依赖于它。
1. 直接改变hash
所以第一个我们能自己想到的SPA的实现方法就是手动更改hash，然后监听hash变化改变路由视图。
原理
window.addEventListener('hashchange', renderView)
window.location.hash = '/login'
DIY
<div>
<a href="#/login">登录</a>
<a href="#/about">关于</a>
</div>
<div class="view"></div>
const $view = document.querySelector(".view");
const routes = {
"/login": "LOGIN",
"/about": "ABOUT",
};
window.addEventListener("hashchange", (e) => {
const route = getHash(e.newURL);
if (route) {
renderView(route);
}
});
function renderView(route) {
const content = routes[route];
$view.innerHTML = content;
}
function getHash(url) {
const href = window.location.href;
const i = href.indexOf("#");
const hash = i >= 0 ? href.slice(i + 1) : "";
return hash;
}
2. pushState
原理
当然直接修改hash已经能很好的实现SPA了，但是我们还能做得更好，更elegant，那就是使用浏览器为我们提供的更强大的方法，也就是HistoryAPI。
history.pushState和history.replaceState都可以用来改变浏览器的URL而不造成刷新。
DIY
我们只需改变部分代码
<div>
<a href="/login">登录</a>
<a href="/about">关于</a>
</div>
<div class="view"></div>
const $links = document.querySelectorAll("a");
$links.forEach((element) => {
element.addEventListener("click", (e) => {
e.preventDefault();
const path = e.target.getAttribute("href");
renderView(path);
window.history.pushState({}, "", "#" + path);
});
});
注意
这里需要注意的是，pushState和replaceState不会触发hashchange，popstate事件。也就是我们需要在pushState/replaceState的同时去更改视图。
3. 区别
不管是hash改变还是pushstate，都会向历史记录里插入一条记录。
但还有很多不同点：
- 使用
history.pushState()可以改变referrer。 - 使用
history.pushState()可以改变任意同源URL而不局限于hash值。 也就是说你在https://test.com/foo.html可以调用history.pushState(null, '', '/bar.html')将URL改为https://test.com/bar.html而不刷新页面，也不会去请求/bar.html（假设其不存在）。有什么用呢？你可以看到这样的URL已经和MPA的URL一样了，这很有利于网站的SEO。但是如果用户在https://test.com/bar.html刷新页面，那就糟了，因为根本不存在bar.html这个资源。所以这也是为什么如果SPA要使用这种URL展示模式需要后端的支持。服务器需要把所有页面都代理到入口页面https://test.com/foo.html上去。再由入口页面做路由跳转。 - 使用
history.pushState(state, title, url)可以传入一个状态对象state。 也就是你可以附加一些数据到跳转的页面上，而hash模式的话你需要将数据放到URL上。
Vue Router实现原理
首先可以确定的一点的是，它的无刷新路由切换最基础的支持就是我们上面提到的hash和history两种实现方式。
这里我们简单扼要的介绍下它是如何改变视图的。
// ...
this._router = this.$options.router
// ...
Vue.util.defineReactive(this, '_route', this._router.history.current)
首先来看下这两行代码，用过VueRouter的都知道this.$options.router就是VueRouter的实例。
但是this._router.history.current表示的是什么呢？它表示的就是当前路由，在每次你this.$router.push/this.$router.replace的时候，current都会更新。
最关键的是这里新定义了一个响应式属性_route。当响应式属性更新时，依赖这个属性的组件都会更新。
你该想到了吧，RouterView就依赖了这个属性_route。它会根据_route的改变而更新组件渲染内容(重新执行render函数)。而_route又会对应有当前路由匹配的组件，这些匹配的组件就是RouterView要渲染的内容。
可以说VueRouter将Vue的响应式设计运用得十分到位了。
同样的原理，也适用于ReactRouterDom上。
如何监听
实现是知道了，那么我们咋监听这玩意？还没有个statechange事件！hashchange倒是有，但是我们需要更完善的解决方案。
不能监听变化，我们只能拦截调用了。就像最开始学习window.onload时使用的方法。
window.onload = () => {
console.log("1");
};
const _onload = window.onload;
window.onload = (e) => {
_onload(e);
console.log(2);
};
不过现在我们有更高级的方法Proxy，以下是一个简单示例。
history.pushState = new Proxy(history.pushState, {
apply: function (target, thisBinding, args) {
console.log('就这？');
return target.apply(thisBinding, args);
},
});
同样的方法，我们还可以代理console，xhr。从而监听网页上的任何活动！
缺点是Proxy是ES6内容，只适用于现代浏览器。古老浏览器需要polyfill。
