前端路由浅析

＊前端路由的实现，本质上是检测 url 的变化，截获 url 地址，然后解析来匹配路由规则。

前端路由实现了“无请求更新页面“，路由实现的方式有以下两种：

1、利用URL中的hash（“#”）
2、利用History interface在 HTML5中新增的方法：
history.pushState 和 history.replaceState

一、hash
1、hash即URL中”#”字符后面的部分。

①使用浏览器访问网页时，如果网页URL中带有hash，页面就会定位到id（或name）与hash值一样的元素的位置；

 ②hash还有另一个特点，它的改变不会导致页面重新加载；

 ③hash值浏览器是不会随请求发送到服务器端的；

 ④通过window.location.hash属性获取和设置hash值。

window.location.hash值的变化会直接反应到浏览器地址栏（#后面的部分会发生变化），同时，浏览器地址栏hash值的变化也会触发window.location.hash值的变化，从而触发onhashchange事件。

2、hashchange事件（IE8已支持该事件）

①当URL的片段标识符更改时，将触发hashchange事件（跟在#符号后面的URL部分，包括#符号）

②hashchange事件触发时，事件对象会有hash改变前的URL（oldURL）和hash改变后的URL（newURL）两个属性：

window.addEventListener('hashchange',function(e) { 
      console.log(e.oldURL); 
      console.log(e.newURL);
  },false);

js单页面路由实现参考链接：
（http://blog.csdn.net/qq_27965129/article/details/53270256）
二、history
1、history.pushState(stateObj, title, url);

这个方法会往当前会话的历史栈中放入一条记录，stateObj是用户自定义的对象，用于记录一些有用的数据，title是标题信息，第三个参数是要放入的url信息。例如我们储存个人信息可以执行history.pushState({id: 1}, ‘name: ff’, ‘?info=person’);

2、history.replaceState(stateObj, title, url);

这个方法于pushState类似，唯一不同的是，执行这个操作后，浏览器会对会话历史栈内的记录进行替换而不是添加，在特定场景下是比较适用的。

可以封装一个简单的函数

function preview(id, isSwitch) {      
    var stateObj = {id: id};  
    var operation = isSwitch ? 'replaceState' : 'pushState';  
//往历史记录栈中放入一条记录或者替换一条记录  
    window.history[operation](stateObj, 'name: ' + id, '?preview=' + id);  
}