路由

對于有過SPA開發(fā)經驗的人來說，路由這個名詞并不陌生，前端的路由和后端的路由在實現(xiàn)技術上不一樣，但是原理都是一樣的。在 HTML5 的 history API 出現(xiàn)之前，前端的路由都是通過 hash 來實現(xiàn)的，hash 能兼容低版本的瀏覽器。它的 URI 規(guī)則中需要帶上 #。Web 服務并不會解析 hash，也就是說 # 后的內容 Web 服務都會自動忽略，但是 JavaScript 是可以通過 window.location.hash 讀取到的，讀取到路徑加以解析之后就可以響應不同路徑的邏輯處理。

簡單介紹AngularJs UI-Router路由

如果你有過AngularJS開發(fā)經驗，#并不陌生，angularjs有自己官方實現(xiàn)的路由體系，也有比較具有代表性的第三方嵌套路由機制UI-Router; 如下代碼塊所示：

.state("main.list",angularAMD.route({    url : '/list/:params',//url &參數(shù)    views : {      "header@main" : angularAMD.route({        templateUrl : 'simple/view/main/html/main/Header.html',        controller:'HeadController',        controllerUrl:[ ****.js                  ]      }),      "menu@main" : angularAMD.route({        templateUrl : 'simple/view/main/html/main/MenuModule.html',        controller : "MenuController",        controllerUrl:[ ****.js]      }),      "mainContent@main":angularAMD.route({        templateUrl : 'simple/view/main/html/main/MainContent.html'      })    }  }))

state()函數(shù)的第一個參數(shù)就是路由，“main.list” 是一個嵌套路由機制，當頁面跳轉到 “main.list”路由下時會先加載 state(“main”,*)下的模塊及其資源（html,js等），隨后加載state（”main.list”）下的模塊和資源（html,js等），實現(xiàn)路由嵌套；

react-router

-先上一段代碼

<Router history={ hashHistory }>  <Route path='/' component={CoreLayout}>  <IndexRoute component={HomeView}/>  <Route path=”/HODE_ROUTE/:param“ component={HomeView}/>  <Route path=“ /AUDIT_ROUTE/:param" component={AuditView}/>  <Route path=“/CHART_ROUTE” component={ChartView}/>  </Route></Router>

React-router以jsx語法類似于DOM結構的形式實現(xiàn)router嵌套；與AngularJs 的UI-Router看似差別很大，實則思想雷同；

Angular的實現(xiàn)邏輯：

跳轉=》state=》module=》靜態(tài)資源（js，css，html）=》show（頁面展示）

react-router的實現(xiàn)邏輯：

跳轉=》path=》component=》靜態(tài)資源（js，css，html）=》show（頁面展示）
本文主要講react-router，下面簡單介紹react-router的使用姿勢：

react-router常用組件入門

嵌套路由

<Router history={hashHistory}> <Route path="/" component={App}>  <Route path="/repos" component={Repos}/>  <Route path="/about" component={About}/> </Route></Router>

上面代碼中，用戶訪問/repos時，會先加載App組件，然后在它的內部再加載Repos組件。