前端路由
内容介绍，为什么要使用前端路由？
在2005左右，兴起了一种叫做ajax的技术，有了ajax之后，我们向服务端提交数据的时候就不再需要使用from表单去提交了，因为from表单之间的提交会导致页面之间的切换，也就是说无法实现单页应用。
为了实现无刷新的视图切换，我们通常会用ajax请求从后台取数据，然后套上HTML模板渲染在页面上，然而ajax的一个致命缺点就是导致浏览器后退按钮失效，尽管我们可以在页面上放一个大大的返回按钮，让用户点击返回来导航，但总是无法避免用户习惯性的点后退。
这也是为什么要使用前端路由的一个原因。
路由机制
解决此问题的一个方法是使用 hash，监听hashchange事件来进行视图切换，另一个方法是用HTML5的history API，通过pushState()记录操作历史，监听popstate事件来进行视图切换，也有人把这叫pjax技术。基本流程如下：
如此一来，便形成了通过地址栏进行导航的深度链接（deeplinking ），也就是我们所需要的路由机制。通过路由机制，一个单页应用的各个视图就可以很好的组织起来了。
前端路由的2种实现原理
早期的路由都是后端实现的，直接根据 url 来 reload 页面，页面变得越来越复杂服务器端压力变大，随着 ajax 的出现，页面实现非 reload 就能刷新数据，也给前端路由的出现奠定了基础。我们可以通过记录 url 来记录 ajax 的变化，从而实现前端路由。
History API
这里不细说每一个 API 的用法，大家可以看 MDN 的文档：https://developer.mozilla.org...
重点说其中的两个新增的API history.pushState 和 history.replaceState
这两个 API 都接收三个参数，分别是
-
状态对象（state object） — 一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。
-
标题（title） — FireFox浏览器目前会忽略该参数，虽然以后可能会用上。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明将要进入的状态。
-
地址（URL） — 新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。新的URL不一定是绝对路径；如果是相对路径，它将以当前URL为基准；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。该参数是可选的；不指定的话则为文档当前URL。
相同之处是两个 API 都会操作浏览器的历史记录，而不会引起页面的刷新。
不同之处在于，pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录。
我们拿大百度的控制台举例子（具体说是我的浏览器在百度首页打开控制台。。。）
我们在控制台输入
window.history.pushState(null, null, "https://www.baidu.com/?name=orange");好，我们观察此时的 url
我们这里不一一测试，直接给出其它用法，大家自行尝试
window.history.pushState(null, null, "https://www.baidu.com/name/orange");
//url: https://www.baidu.com/name/orange
window.history.pushState(null, null, "?name=orange");
//url: https://www.baidu.com?name=orange
window.history.pushState(null, null, "name=orange");
//url: https://www.baidu.com/name=orange
window.history.pushState(null, null, "/name/orange");
//url: https://www.baidu.com/name/orange
window.history.pushState(null, null, "name/orange");
//url: https://www.baidu.com/name/orange注意:这里的 url 不支持跨域，当我们把
www.baidu.com换成baidu.com时就会报错。
Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL'https://baidu.com/?name=orange' cannot be created in a document with origin 'https://www.baidu.com' and URL'https://www.baidu.com/?name=orange'.回到上面例子中，每次改变 url 页面并没有刷新，同样根据上文所述，浏览器会产生历史记录
这就是实现页面无刷新情况下改变 url 的前提，下面我们说下第一个参数 状态对象
如果运行 history.pushState() 方法，历史栈对应的纪录就会存入 状态对象，我们可以随时主动调用历史条目
此处引用 mozilla 的例子
<title>Line Game - 5title>
<p>You are at coordinate <span id="coord">5span> on the line.p>
<p>
<a href="?x=6" onclick="go(1); return false;">Advance to 6a> or
<a href="?x=4" onclick="go(-1); return false;">retreat to 4a>?
p>
<script>
var currentPage = 5; // prefilled by server！！！！
function go(d) {
setupPage(currentPage + d);
history.pushState(currentPage, document.title, '?x=' + currentPage);
}
onpopstate = function(event) {
setupPage(event.state);
}
function setupPage(page) {
currentPage = page;
document.title = 'Line Game - ' + currentPage;
document.getElementById('coord').textContent = currentPage;
document.links[0].href = '?x=' + (currentPage+1);
document.links[0].textContent = 'Advance to ' + (currentPage+1);
document.links[1].href = '?x=' + (currentPage-1);
document.links[1].textContent = 'retreat to ' + (currentPage-1);
}
script> 我们点击 Advance to ？ 对应的 url 与模版都会 +1，反之点击 retreat to ？ 就会都 -1，这就满足了 url 与模版视图同时变化的需求
实际当中我们不需要去模拟 onpopstate 事件，官方文档提供了 popstate 事件，当我们在历史记录中切换时就会产生 popstate 事件。对于触发 popstate 事件的方式，各浏览器实现也有差异，我们可以根据不同浏览器做兼容处理。
详情参考： history.pushState无刷新改变url
hash
我们经常在 url 中看到 #，这个 # 有两种情况，一个是我们所谓的锚点，比如典型的回到顶部按钮原理、Github 上各个标题之间的跳转等，路由里的 # 不叫锚点，我们称之为 hash，大型框架的路由系统大多都是哈希实现的。
同样我们需要一个根据监听哈希变化触发的事件 —— hashchange 事件
我们用 window.location 处理哈希的改变时不会重新渲染页面，而是当作新页面加到历史记录中，这样我们跳转页面就可以在 hashchange 事件中注册 ajax 从而改变页面内容。
这里我在 codepen 上模拟了一下原理: http://codepen.io/orangexc/pe... 点击预览
hashchange 在低版本 IE 需要通过轮询监听 url 变化来实现，我们可以模拟如下
(function(window) {
// 如果浏览器不支持原生实现的事件，则开始模拟，否则退出。
if ( "onhashchange" in window.document.body ) { return; }
var location = window.location,
oldURL = location.href,
oldHash = location.hash;
// 每隔100ms检查hash是否发生变化
setInterval(function() {
var newURL = location.href,
newHash = location.hash;
// hash发生变化且全局注册有onhashchange方法（这个名字是为了和模拟的事件名保持统一）；
if ( newHash != oldHash && typeof window.onhashchange === "function" ) {
// 执行方法
window.onhashchange({
type: "hashchange",
oldURL: oldURL,
newURL: newURL
});
oldURL = newURL;
oldHash = newHash;
}
}, 100);
})(window);大型框架的路由当然不会这么简单，angular 1.x 的路由对哈希、模版、处理器进行关联，大致如下
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
$routeProvider
.when('/article', {
templateUrl: '/article.html',
controller: 'ArticleController'
}).otherwise({
redirectTo: '/index'
});
$locationProvider.html5Mode(true);
}]) 这套路由方案默认是以 # 开头的哈希方式，如果不考虑低版本浏览器，就可以直接调用 $locationProvider.html5Mode(true) 利用 H5 的方案而不用哈希方案。
总结
H5+hash方案：兼容所以浏览器，又照顾到了高级浏览器应用新特性。
纯H5方案：表示IE是谁，我不认识-_-"，这套方案应用纯H5的新特性，URL随心定制。
纯Hash方案：其实一开始我是拒绝的，可是...可是...duang...IE~~:)文章出自 orange 的 个人博客 http://orangexc.xyz/