路由

創(chuàng)新互聯(lián)是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來公司不斷探索創(chuàng)新，始終堅持為客戶提供滿意周到的服務(wù)，在本地打下了良好的口碑，在過去的十載時間我們累計服務(wù)了上千家以及全國政企客戶，如混凝土泵車等企業(yè)單位，完善的項目管理流程，嚴格把控項目進度與質(zhì)量監(jiān)控加上過硬的技術(shù)實力獲得客戶的一致贊揚。

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

簡單介紹AngularJs UI-Router路由

如果你有過AngularJS開發(fā)經(jīng)驗，#并不陌生，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” 是一個嵌套路由機制，當頁面跳轉(zhuǎn)到 “main.list”路由下時會先加載 state(“main”,*)下的模塊及其資源（html,js等），隨后加載state（”main.list”）下的模塊和資源（html,js等），實現(xiàn)路由嵌套；

react-router

-先上一段代碼

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

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

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

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

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

react-router常用組件入門

嵌套路由

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

子路由也可以不寫在Router組件里面，單獨傳入Router組件的routes屬性

let routes = 
 
 
;

path 屬性

Route組件的path屬性指定路由的匹配規(guī)則,看下面例子

上面代碼中，當用戶訪問/inbox/messages/:id時，會加載下面的組件。

IndexRoute 組件

類似index.html ,默認加載組件，下面代碼默認加載home組件

現(xiàn)在，用戶訪問/的時候，加載的組件結(jié)構(gòu)如下。

Redirect 組件

Redirect組件用于路由的跳轉(zhuǎn)，即用戶訪問一個路由，會自動跳轉(zhuǎn)到另一個路由。

 {/* 從 /inbox/messages/:id 跳轉(zhuǎn)到 /messages/:id */}
 ＜Redirect from="messages/:id" to="/messages/:id" />

現(xiàn)在訪問/inbox/messages/5，會自動跳轉(zhuǎn)到/messages/5。

Link

Link組件用于取代a標簽，生成一個鏈接，允許用戶點擊后跳轉(zhuǎn)到另一個路由。它基本上就是a標簽的React 版本，可以接收Router的狀態(tài)。

表單處理

Link組件用于正常的用戶點擊跳轉(zhuǎn)，但是有時還需要表單跳轉(zhuǎn)、點擊按鈕跳轉(zhuǎn)等操作。這些情況怎么跟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)
 },
})

多人協(xié)作開發(fā)router文件管理

一般一個項目都會有一個統(tǒng)一的router文件，相當于一個router池，不同的請求，請求router池中所匹配的路徑，加載請求所需頁面。 but 。。。 每個開發(fā)者開發(fā)一個組件都會需要配置路由，會導致router文件不易管理，容易導致沖突，甚至故障。 so。。，也許，可能可以每個組件文件夾下對于一個XXX.router 文件，前端代碼打包上傳到線上時觸發(fā)某個鉤子函數(shù)，將XXX.router文件統(tǒng)一合并到中央router文件中，從而避免多人操作router文件。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。