什麼是前端路由

前端路由在不少開源的js類庫框架中都獲得支持，如angularJS，Backbone，Reactjs等等。這篇文章主要和你們談談什麼是前端路由，以及它的使用場景及優缺點
1.什麼是路由
簡單舉例說明，假如咱們有一臺提供 Web 服務的服務器的網絡地址是：10.0.0.1，而該 Web 服務又提供了三個可供用戶訪問的頁面，其頁面 URI 分別是：

http://10.0.0.1/
http://10.0.0.1/about
http://10.0.0.1/concat
那麼其路徑就分別是 /，/about，/concat。
當用戶使用 http://10.0.0.1/about 來訪問該頁面時，Web 服務會接收到這個請求，而後會解析 URL 中的路徑 /about，在 Web 服務的程序中，該路徑對應着相應的處理邏輯，程序會把請求交給路徑所對應的處理邏輯，這樣就完成了一次「路由分發」，這個分發就是經過「路由」來完成的。
之前路由都是後臺作的，經過用戶請求的url導航到具體的html頁面，前端路由就是經過配置js文件，把這個工做拿到前端來作。
簡單的說，路由是根據不一樣的 url 地址展現不一樣的內容或頁面

2.前端路由

前端的路由和後端的路由在實現技術上不同，可是原理都是同樣的。在 HTML5 的 history API 出現以前，前端的路由都是經過 hash 來實現的，hash 能兼容低版本的瀏覽器。若是咱們把上面例子中提到的 3 個頁面用 hash 來實現的話，它的 URI 規則中須要帶上 #。

1 http://10.0.0.1/
2 http://10.0.0.1/#/about
3 http://10.0.0.1/#/concat

Web 服務並不會解析 hash，也就是說 # 後的內容 Web 服務都會自動忽略，可是 JavaScript 是能夠經過 window.location.hash 讀取到的，讀取到路徑加以解析以後就能夠響應不一樣路徑的邏輯處理。
history 是 HTML5 纔有的新 API，能夠用來操做瀏覽器的 session history。基於 history 來實現的路由能夠和最初的例子中提到的路徑規則同樣。

1 http://10.0.0.1/
2 http://10.0.0.1/about
3 http://10.0.0.1/concat

具體如何實現前端路由將在後面的文章中介紹。

3.前端路由的使用場景？
前端路由更多用在單頁應用上, 也就是SPA, 由於單頁應用, 基本上都是先後端分離的, 後端天然也就不會給前端提供路由。

4.前端路由優缺點

優勢：
1.從性能和用戶體驗的層面來比較的話，後端路由每次訪問一個新頁面的時候都要向服務器發送請求，而後服務器再響應請求，這個過程確定會有延遲。而前端路由在訪問一個新頁面的時候僅僅是變換了一下路徑而已，沒有了網絡延遲，對於用戶體驗來講會有至關大的提高。
2.在某些場合中，用ajax請求，可讓頁面無刷新，頁面變了但Url沒有變化，用戶就不能複製到想要的地址，用前端路由作單頁面網頁就很好的解決了這個問題
缺點：

使用瀏覽器的前進，後退鍵的時候會從新發送請求，沒有合理地利用緩存，