路由，某度的解釋爲：指分組從源到目的地時，決定端到端路徑的網絡範圍的進程；路由工作在OSI參考模型的第三層–網絡層的數據包轉發設備，路由器通過轉發數據包來實現網絡互聯。
對應在網站開發中的路由就是指網頁頁面從源網頁到目標展示網頁時，決定網頁到網頁跳轉展示的一系列過程，早期的路由都是後端實現的，直接根據
url來reload頁面，即頁面不同元素綁定不同的url鏈接地址，用戶點擊不同的鏈接，後端服務器返回不同的頁面文檔，瀏覽器重新進行加載渲染。隨着項目的增大，服務器的壓力越來越大，
ajax技術的出現也實現了頁面非reload就能局部刷新數據，奠定了前端路由的基礎，可以通過記錄url來記錄ajax的變化，從而實現前端路由；
前端路由實現的本質都是基於瀏覽器的location對象或者history對象的方法特性結合ajax技術來實現的，實際生產開發中運用的各個不同框架中的路由模塊、插件、庫都是再次基礎上進行了不同程度的封裝，進而實現路由控制。
1. 兩種不同的路由機制原理
1.1 History API
W3C定義的BOM中對應的
history對象：提供瀏覽器url跳轉的相關功能- history對象從窗口被打開的那一刻開始算起，該對象保存着用戶上網的歷史記錄；
- 每個瀏覽器窗口、每個標籤頁乃至每個框架，都有自己的history對象與特定的window對象關聯；
- 出於安全機制，開發人員無法得知用戶瀏覽過的url，但可以藉由訪問過的頁面列表，在不知道實際url的情況下實現頁面後退前進(或者間隔特定次數的url跳轉)
- 主要屬性(只讀)：
history.length; - 主要方法：
history.back()、history.forward()、history.go(num)、history.pushState(stateObj,title,url)、history.replaceState(stateObj,title,url);
PS:當頁面URL改變時，變回生成一條歷史記錄；IE8以上版本，這裏的URL變化包含has值的變化；即設置
location.hash會同時生成一條新的歷史記錄；1.2 hash
W3C中的
location對象: 提供了與當前窗口中加載的文檔有關的信息，還提供一些導航功能location對象即是window對象的屬性、同時也是document的屬性；- 保存着當前文檔的信息，提供一系列解析
url爲獨立片段的方法屬性 - location的每一個屬性值得變化都會改變當前加載的頁面;
- location屬性變化導致的頁面的變化，都會生成新的歷史記錄；可以用瀏覽器前進、後退來進行控制頁面的跳轉
- 主要屬性(全部可讀寫)：
window.href、location.protocol、location.hostname、location.port、location.pathname、location.hash、location.search、 - 主要方法：
location.assign()、location.reload()、location.replace()、location.toString()
2. AngularJS路由插件- ui-router
網站的路由是在網站設計之處就應該考慮的事情，是整個應用有序運行的規範及執行流程；
一個合理的路由模塊應該至少包含以下8個方面的特性：
- ①路由嵌套：父、子路由
- ②路由視圖控制容器
- ③路由配置/路由狀態
- ④路由解析 Resolve
- ⑤路由參數 params
- ⑥路由生命週期及鉤子
- ⑦路由導航:頁面自動導航、手動導航
- ⑧路由模塊懶加載
本文以angularJS的插件ui-router爲例，總結一下一個路由組件需要具備的功能及方法。爲保證應用的正常運行，路由需要在應用初始化之前就定義並完成加載；
針對於 ui-router插件，需要在應用初始化時完成：①路由模塊的注angular.module.config(RouteConfig)、②路由狀態的定義$stateProvider.state({stateObj})、③路由視圖容器的定義<ui-view></ui-view>、④路由跳轉鏈接的定義<a ui-sref="urlNameA">urlNameALink</a>
2.1 路由狀態定義
- 概述：
ui-router路由的應用程序就像一個轉檯機。程序的每一個模塊都是應用程序的一種狀態；一個ui-router狀態state通常響應程序的一個特性;每個state都是一個定義了一個包含有一個狀態被激活時的屬性的JS對象：
state狀態的屬性
name：狀態的名稱，用來提供路由導航的路由代號；views：路由導航後展示的內容；url：路由導航後對應的url展示內容；params：路由導航所必須的路由參數；resolve：路由導航之後頁面展示的內容所需要的相關參數，通常通過異步交互獲取；
- 嵌套路由：
- 應用程序的路由通常包含不同層級的導航方式；父級路由可以包含多個子級路由；
- 子級路由狀態
state視圖通常在父級模塊視圖渲染完成之後進行渲染； - 路由狀態通常需要提供
url、views但這都是可選的參數，
2.2 視圖 views
概述：包括普通路由視圖、嵌套路由視圖、具名視圖；
參考文章：
1 「前端」History API與瀏覽器歷史堆棧管理;
2. 前端路由的兩種實現方式;
3. 前端路由的兩種實現原理;