关于先后端分离后的路由控制问题

路由控制在多数框架中均有专门的方法，好比ng和node。可是只会使用是不能够的，虽然我连使用都不会。研究它的实现方式，才是正经道路，由于不管框架中的方式都炫酷或者实用，都是从底层开发出来了，那么底层的方法，就是须要了解研究的方法。依此，在之后的使用或者是自定义的时候才可以如臂使指。

那么前端的路由控制总归来讲是有两种方法的。

第一种是H5新增的一类API，history。首先来看一下它的诸多方法。

//与浏览器后退按钮做用相同
window.history.back();

//跳转到
window.history.go(number);
number == -1 时与back做用相同

//与浏览器前进按钮做用相同
window.history.forward();

//向浏览器历史栈中添加一条历史记录
window.history.pushState(data, title, url);

//修改当前历史记录
window.history.replaceState(data, title, url);

//同页面不刷新跳转时触发事件
window.onpopstate()

这种方法支持IE9以上（不包括IE9）及其他浏览器，data数据最多能够存储640KB。而且能够根据本身须要定义url的样式，通常状况下默认使用#、#！和？做为分隔，固然也可使用其余，甚至“/”。

 

第二种方法，window.location.hash。

这种方法支持IE7以上及其他全部浏览器，不包括IE7。它是以#做为前端路由的分隔的。

一样的，也有跳转触发事件，onhashchange

以下是兼容状况。（mark到的）

history&&history.pushState兼容以下：
 chrome true；
 Firefox true；
 IE10 true;
 IE<=9 false;  
 PS:ie<=9既然不支持这些api那就只能采用hash方案，来实现路由系统的兼容了。

hashchange兼容以下：
 IE9 true;
 IE8 true;
 IE7 false;
 ...

页面load时，onhashchange默认触发状况：
 chrome 需主动trigger才能触发
 FF 需主动trigger才能触发
 IE 需主动trigger才能触发

页面load时，onpopstate默认触发状况：
 chrome <34版本以前的默认触发 
 FF 默认不触发
 IE 默认不触发
PS：以上是我手动测试的一个大概状况，具体的兼容状况能够去这里测试（http://caniuse.com/）。

而做为IE六、7的话就要使用setIntval（）来侦听url的变化了。

 

那么做为分隔，#以后的内容是并不为ajax抓取的。

例如

//使用ajax，url=http://qq.com/index.html#444
//那么实际上是ajax的请求地址是
http://qq.com/index.html

那么其实路由控制就是这样的原理而已。

若是使用h5的api的话须要和后台进行规范约定，约定哪些是前端来作路由控制，哪些由后台来作。

固然也能够两种方式结合起来，这样来作到一个兼容性。噢。不！是三种结合，万一。。。对不对。

总结以下

H5+hash方案：兼容因此浏览器，又照顾到了高级浏览器应用新特性。

纯H5方案：表示IE是谁，我不认识-_-"，这套方案应用纯H5的新特性，URL随心定制。

纯Hash方案：其实一开始我是拒绝的，但是...但是...duang...IE~~:)

那么这就是底层的实现方法了，至于ng和node等框架中如何来作路由控制我还没接触，最近的项目使用的是springMVC框架，那么路由控制全由后台来掌控，就没那么多事了。