路由
對于有過SPA開發經驗的人來說，路由這個名詞并不陌生，前端的路由和后端的路由在實現技術上不一樣，但是原理都是一樣的。在 HTML5 的 history API 出現之前，前端的路由都是通過 hash 來實現的，hash 能兼容低版本的瀏覽器。它的 URI 規則中需要帶上 #。Web 服務并不會解析 hash，也就是說 # 后的內容 Web 服務都會自動忽略，但是 JavaScript 是可以通過 window.location.hash 讀取到的，讀取到路徑加以解析之后就可以響應不同路徑的邏輯處理。
簡單介紹AngularJs UI-Router路由
如果你有過AngularJS開發經驗，#并不陌生，angularjs有自己官方實現的路由體系，也有比較具有代表性的第三方嵌套路由機制UI-Router; 如下代碼塊所示：
.state("main.list",angularAMD.route({ url : '/list/:params',//url &參數 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()函數的第一個參數就是路由，“main.list” 是一個嵌套路由機制，當頁面跳轉到 “main.list”路由下時會先加載 state(“main”,*)下的模塊及其資源（html,js等），隨后加載state（”main.list”）下的模塊和資源（html,js等），實現路由嵌套；
-先上一段代碼
<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結構的形式實現router嵌套；與AngularJs 的UI-Router看似差別很大，實則思想雷同；
Angular的實現邏輯：
跳轉=》state=》module=》靜態資源（js，css，html）=》show（頁面展示）
react-router的實現邏輯：
跳轉=》path=》component=》靜態資源（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組件。
<App> <Repos/></App>
子路由也可以不寫在Router組件里面，單獨傳入Router組件的routes屬性
let routes = <Route path="/" component={App}> <Route path="/repos" component={Repos}/> <Route path="/about" component={About}/></Route>;<Router routes={routes} history={browserHistory}/>path 屬性
Route組件的path屬性指定路由的匹配規則,看下面例子
<Route path="inbox" component={Inbox}> <Route path="messages/:id" component={Message} /></Route>上面代碼中，當用戶訪問/inbox/messages/:id時，會加載下面的組件。
<Inbox> <Message/></Inbox>
IndexRoute 組件
類似index.html ,默認加載組件，下面代碼默認加載home組件
<Router> <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="accounts" component={Accounts}/> <Route path="statements" component={Statements}/> </Route></Router>現在，用戶訪問/的時候，加載的組件結構如下。
<App> <Home/></App>
Redirect 組件
Redirect組件用于路由的跳轉，即用戶訪問一個路由，會自動跳轉到另一個路由。
<Route path="inbox" component={Inbox}> {/* 從 /inbox/messages/:id 跳轉到 /messages/:id */} ＜Redirect from="messages/:id" to="/messages/:id" /></Route>現在訪問/inbox/messages/5，會自動跳轉到/messages/5。
Link
Link組件用于取代a標簽，生成一個鏈接，允許用戶點擊后跳轉到另一個路由。它基本上就是a標簽的React 版本，可以接收Router的狀態。
表單處理
Link組件用于正常的用戶點擊跳轉，但是有時還需要表單跳轉、點擊按鈕跳轉等操作。這些情況怎么跟React Router對接呢？
第一種方法是使用browserHistory.push
handleSubmit(event) { event.preventDefault() const userName = event.target.elements[0].value const repo = event.target.elements[1].value const path = `/repos/${userName}/${repo}` browserHistory.push(path) }${userName} 一種后端語言常用的表達式寫法，可在字符串中取變量
handleSubmit(event) { // ... this.context.router.push(path) },第二種方法是使用context對象。
export default React.createClass({ // ask for `router` from context contextTypes: { router: React.PropTypes.object }, handleSubmit(event) { // ... this.context.router.push(path) },})多人協作開發router文件管理
一般一個項目都會有一個統一的router文件，相當于一個router池，不同的請求，請求router池中所匹配的路徑，加載請求所需頁面。 but 。。。 每個開發者開發一個組件都會需要配置路由，會導致router文件不易管理，容易導致沖突，甚至故障。 so。。，也許，可能可以每個組件文件夾下對于一個XXX.router 文件，前端代碼打包上傳到線上時觸發某個鉤子函數，將XXX.router文件統一合并到中央router文件中，從而避免多人操作router文件。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
