本文总结自：
最初接触前端路由是 vue-router，当时仅仅觉得可以通过 router-link 改变页面，觉得很神奇呀，用多了就习惯了。
后面接触了 node，通过 express 知晓了后端路由，这是我就开始疑问了：
为什么使用那些前端框架的时候，前端 url 改变了视图，但是却没有向后台发送请求？
首先我们需要一些前置知识。
路由/前端路由/后端路由？
路由：通过不同的 url 地址展示不同的内容或者页面。
前面提到过，我最初接触到路由是通过 express 框架，我们先看一段代码：
app.post("/category/add", function(req, res, next) {
// do something
});
如果你没有接触过 node 也没关系，因为真的不难理解。
定义了一个 path('/categoty/add')，当有人通过(即域名+path)，例如：
http://www.example.com/category/add
发起 post 请求时，就会进入后台定义好的回调函数，进行逻辑处理，譬如取得 post 传递过来的实体数据，对数据库进行增删查改，然后返回一个渲染好的 html 页面或者是 json 数据等等。
后端路由（不考虑提供 API 服务返回数据），这一过程由服务器控制完成的，直接喷射一个 html 给前端，浏览器页面刷新。
那前端路由是什么呢？还是通过不同的 url 地址展示不同的内容或者页面，但是这一过程都是由前端完成的，我们的页面或视图（模块）是在前端编写好，通过 url 变化去切换而已。
为什么需要前端路由：
因为后台每次返回一个新页面都会进行全局刷新，而在单页面应用中，大部分页面结构不变，只改变部分内容的使用，我们可以通过前端路由改变页面内容，后台只需要通过 ajax 提供数据即可。
现在，我们来看看前端路由到底是如何实现的。
实现简易前端路由
方式一：html5 history
首先我们需要了解 HTML5 为我们提供的 history API，准确的说是这里面的两个方法:
history.pushState 和 history.replaceState
history.pushState
带有三个参数：一个状态对象，一个标题（现在被忽略了），以及一个可选的 URL 地址。下面将对这三个参数进行细致的检查：
实例代码（来自Web 开发中 前端路由 实现的几种方式和适用场景）
//假设当前网页URL为：http://tonylee.pw
window.history.pushState(null, null, "http://tonylee.pw?name=tonylee");
//url变化：http://tonylee.pw -> http://tonylee.pw?name=tonylee
window.history.pushState(null, null, "http://tonylee.pw/name/tonylee");
//url变化：http://tonylee.pw -> http://tonylee.pw/name/tonylee
window.history.pushState(null, null, "?name=tonylee");
//url变化：http://tonylee.pw -> http://tonylee.pw?name=tonylee
window.history.pushState(null, null, "name=tonylee");
//url变化：http://tonylee.pw -> http://tonylee.pw/name=tonylee
window.history.pushState(null, null, "/name/tonylee");
//url变化：http://tonylee.pw -> http://tonylee.pw/name/tonylee
window.history.pushState(null, null, "name/tonylee");
//url变化：http://tonylee.pw -> http://tonylee.pw/name/tonylee
//错误的用法：
window.history.pushState(null, null, "http://www.tonylee.pw?name=tonylee");
//error: 由于跨域将产生错误
history.replaceState
pushState()和 replaceState()参数一样。
两个方法的主要区别就是：pushState()是在 history 栈中添加一个新的条目，replaceState()是替换当前的记录值。关于 API 的详细解释可以戳这里
我们需要知道的是，就是两个方法可以改变浏览器的 url，但是不会重新加载页面，没错！！！这些 URL 不会直接传给服务器，而是会被浏览器消化处理掉.
这个就是我们需要的。
这样我们就可以通过这两个方法改变 url 了。
改变之后呢？切换视图呀！
那我们就需要在这两个方法被调用的时候，触发一个方法去切换视图，好在 HTML5 也给我们提供了一个事件。
window.onpopstate
浏览器本身会自带一个 popstate 事件，但是只有在我们点击返回或前进按钮时才会正常触发。
很显然，在我们单页应用中是需要你去大部分情况下都是需要去点击某个 Link 调用 pushState，而这样是无法触发 popstate 事件的，需要重写一下 pushState，并且给他也定义一个事件，这里就叫他 onpushstate 吧，比如下面这样。
(function(history) {
var pushState = history.pushState;
history.pushState = function(state) {
if (typeof history.onpushstate == "function") {
history.onpushstate({ state: state });
}
return pushState.apply(history, arguments);
};
})(window.history);
window.onpopstate = history.onpushstate = function(event) {
// change view
};
如此一来，进行 pushState 操作会触发 onpushstate 事件，我们可以在 onpushstate 事件的回调中进行视图切换了，而前进后退我们可以通过 popstate 来操作。
别忘了给 a 标签做一些必要操作，阻止默认跳转，而是通过 pushState 改变 url，然后由于 pushState 被调用，又会触发 onpushstate 事件，其内的逻辑代码就会被执行，比如，更改视图。
var elements = document.getElementsByTagName("a");
for (var i = 0, len = elements.length; i < len; i++) {
elements[i].onclick = function(event) {
event.preventDefault();
var route = event.target.getAttribute("href");
history.pushState({ page: route }, route, route);
};
}
这只是一个思路，当然，当初学习 vue-router 的时候还有个 hash 模式以及 html5 history 模式，后者无疑就是我们刚才实现的方式，前者则兼容性更好，也更为容易理解。
使用 hash 完成前端路由
<ul>
<li><a href="#/">turn white</a></li>
<li><a href="#/blue">turn blue</a></li>
<li><a href="#/green">turn green</a></li>
</ul>
function Router() {
this.routes = {};
this.currentUrl = "";
}
// 注册路由
Router.prototype.route = function(path, callback) {
this.routes[path] = callback || function() {};
};
Router.prototype.refresh = function() {
console.log("触发一次 hashchange，hash 值为", location.hash);
this.currentUrl = location.hash.slice(1) || "/";
// 触发回调
this.routes[this.currentUrl]();
};
Router.prototype.init = function() {
// 监听load以及hashchange事件
window.addEventListener("load", this.refresh.bind(this), false);
window.addEventListener("hashchange", this.refresh.bind(this), false);
};
window.Router = new Router();
window.Router.init();
var content = document.querySelector("body");
// change Page anything
function changeBgColor(color) {
content.style.backgroundColor = color;
}
Router.route("/", function() {
changeBgColor("white");
});
Router.route("/blue", function() {
changeBgColor("blue");
});
Router.route("/green", function() {
changeBgColor("green");
});
小知识-pjax
pjax 是一种基于 ajax+history.pushState 的新技术，该技术可以无刷新改变页面的内容，并且可以改变页面的 URL。pjax 是 ajax+pushState 的封装，同时支持本地存储、动画等多种功能。目前支持 jquery、qwrap、kissy 等多种版本。
众所周知，Ajax 可以实现页面的无刷新操作——优点；但是，也会造成另外的问题，无法前进与后退！曾几何时，Gmail 似乎借助 iframe 搞定，如今，HTML5 让事情变得如同过家家般简单。
当执行 Ajax 操作的时候，往浏览器 history 中塞入一个地址（使用 pushState）（这是无刷新的）；于是，返回的时候，通过 URL 或其他传参，我们就可以还原到 Ajax 之前的模样。