SPA(single page application)-单页面应用有两个特点，一是路由控制，二是模板渲染。通过路由器，可以在不reload页面的情况下，实现页面部分刷新。那么，最关键的地方，就是如何设计路由器，如何让路由器工作？
一般，路由器有两种模式：
1.锚点（URL片段标识符）
URL格式大致如下：
http://www.somesite.com/index.html#hashinfo
http://www.somesite.com/index.html#!/hashinfo
...
主要部分就是#，后面的内容统称为“锚点”。当改变锚点时，页面的主体部分会切换内容，但是，整个页面不会被重新刷新。
那么，如何监听锚点变化？
1) 方法一：hashchange事件
hashchange事件遵从HTML5规范，它会在页面URL中的片段标识符(第一个#号开始到末尾的所有字符,包括#号)发生改变时触发。浏览器兼容情况如下（参考网站：http://caniuse.com/）：
haschange.png
如下代码可以监听hash变化：
window.onhashchange = funcRef 或者
<body onhashchange= 'funcRef()'> 或者
window.addEventListener("hashchange", funcRef, false);
如果要兼容IE8以下的IE浏览器呢？或者兼容其他不支持hashchange事件的浏览器？该如何监听锚地变化？
2)方法二：setTimeout或setInterval
这种方法确实比较蛋疼。。。如果时间间隔设置的太长可能不够即时，如果时间间隔设置的太短又会影响页面性能。
不过，作为hashchange事件的polyfill方法，被采用在很多jquery.hashchange插件里，比如jquery库：jquery.ba-hashchange
jquery.ba-hashchange.js工作原理大致为：
var timeout_id;
function setup(){
if ( "onhashchange" in window.document.body ) { return; }
timeout_id || poll();
}
function poll() {
var hash = get_fragment(),
...
timeout_id = setTimeout( poll, 50 );
}
function get_fragment( url ) {
url = url || location.href;
return '#' + url.replace( /^[^#]*#?(.*)$/, '$1' );
}
2. HTML5 History API
HTML5包含新对象history，其提供对浏览器历史记录的访问能力。它暴露一些常用方法和属性，可以让用户通过操作浏览器“前进”和“后退”按钮，访问到历史记录。
- pushState(): 添加新的历史条目
- replaceState(): 用新条目替代已有的历史条目
- popstate事件: 每当激活的历史记录发生变化时，该事件被触发（激活的历史记录为用pushState创建的历史条目）
浏览器支持情况如下：
history.png
那么，如何利用history这些特性来创建路由器？
- 假设现在的页面URL为
http://www.somesite.com/index.html； - 点击某个菜单，需要更改页面内容，调用JS：
history.pushState(null, null, 'subPage1.html')； - 这时，浏览器地址栏显示的URL变为
http://www.somesite.com/subPage1.html； - 同时，
window.popstate事件被触发（可以开心的做你想做的事情了）； - 整体页面，并没有刷新，没有激活
window.onload事件；
如此可见，利用HTML5 history API，可以实现“切换URL地址但页面不会被刷新”的功能。
它的优点是，路由器在多个URL间跳转，可以完全支持浏览器SEO（切换Hash不能改变真正的URL，多次路由切换后，搜索引擎爬虫会认为一直访问同一个页面，无法SEO）。
缺点是，切换路由后的http://www.somesite.com/subPage1.html 并不是一个真正的资源地址，想象一下，这个时候点击浏览器刷新按钮，浏览器必然会发起对subPage1.html资源文件的请求。此时，服务器必须能够返回正确资源，否则response将会是404。
也就是说，要完成HTML5 history API的使用配置，需要对服务器进行调整，以便其能够对为所有路由路径返回正确的内容。
3. 小结
目前流向的前端SPA框架，都支持上述两种模式的路由。比如Angularjs, Vue.js, backbone......
用户可以在框架里自行配置。一般，默认是URL片段标识符，也就是hash锚点模式。
参考资料：
https://developer.mozilla.org/zh-CN/docs/DOM/Manipulating_the_browser_history
https://developer.mozilla.org/zh-CN/docs/Web/Events/hashchange
微信公众号：
网友评论