關於先後端分離後的路由控制問題

路由控制在多數框架中均有專門的方法，好比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框架，那麼路由控制全由後臺來掌控，就沒那麼多事了。