Vue-Router和React-Routerd對比

*僅從設計理念、使用角度進行對比，不涉及實現原理。*

總的來說，二者的設計理念大致相同，但是由於對應的框架分別是VUE和React，使得它們的使用方式略有些細微的差別。下文的著重點就是對比它們的差別部分。

無論是vue-router還是react-router，它們的最基本的初衷就是實現前端路由。所謂前端路由，簡單來說，就是當瀏覽器的url產生變化時，不向伺服器進行請求，而是直接控制前端頁面產生變化，以期待前端在比如功能切換時，產生類似頁面跳轉等效果。

而這裡面最基本的，無論是vue-router還是react-router，都要提供一種配置方式，讓使用者可以**配置出url路徑和要展示的元件的對應關係**。這樣一來，使用者通過頁面點選或者其他方式觸發瀏覽器url變化時，VUE或者React系統就可以找到這個url對應的VUE元件或者React元件，從而有針對性地，將這個元件在頁面上渲染。

##### 典型程式碼：
###### vue-router
JS:
```
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app')
```
HTML:
```
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <router-linkto="/foo">Go to Foo</router-link>
    <router-linkto="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口-->
  <!-- 路由匹配到的元件將渲染在這裡 -->
 <router-view></router-view>
</div>
```
###### react-router
JS/JSX:
```
// modules/Foo.js
import React from 'react'
export default React.createClass({
  render() {
    return<div>Foo</div>
  }
})
```
```
// modules/Bar.js
import React from 'react'
export default React.createClass({
  render() {
    return<div>Bar</div>
  }
})
```
```
// index.js
// ...
render((
  <Routerhistory={hashHistory}>
    <Route path="/"component={App}>
      {/* make them children of `App`*/}
      <Route path="/foo"component={Foo}/>
      <Route path="/bar"component={Bar}/>
    </Route>
  </Router>
), document.getElementById('app'))
```
```
// modules/App.js
// ...
  render() {
    return (
      <div>
        <h1>React RouterTutorial</h1>
        <ulrole="nav">
          <li><Linkto="/foo">Go To Foo</Link></li>
          <li><Linkto="/bar">Go To Bar</Link></li>
        </ul>

        {/* 路由匹配到的元件將渲染在這裡 */}
        {this.props.children}

      </div>
    )
  }
// ...
```

兩個典型程式碼實際上是有區別的。看似都實現了根路由和兩個自定義路由，但是這裡用的react-router的典型程式碼實際上採用了子路由的方式，而vue-router僅用了並列級別的路由。之所以放這兩種不同的典型程式碼，實際上這樣更容易對比出二者的區別。

- 首先定義元件。定義Foo元件和Bar元件的方式的區別是VUE和React框架語法級別的區別，不在我們的討論範圍之內。
- 元件定義好之後，配置url和元件的對應關係。在典型程式碼中，vue-router定義了一個routes物件，它是一個陣列，陣列中每個物件表示該對應關係。而react-router定義採用了JSX方式，清晰地表示了這個對應關係，以及和/路由的父子關係。需要注意的是：VUE的路由配置要提供給new VueRouter()物件，這個物件要在全域性VUE物件初始化時提供；而React路由則需要配置給全域性<Router/>元件，雖然react-router也提供類似於vue-router典型程式碼中的物件陣列形式的配置方式，但是最終仍是要將配置傳遞給<Router/>。**一個是全域性配置(VUE)，一個是全域性元件(React)，這是兩者使用上的根本區別之一。**(vue-router並不提供像JSX這種類html的配置方式，它只能以物件方式提供路由配置，這也是框架系統不同所決定的)
- 子路由配置。vue-router在典型程式碼中並沒有體現如何配置子路由，其實就vue-router路由元件的使用來說，無論是哪個級別的路由元件，**都會被渲染到父元件<router-view/>元件標識的地方**。對於react-router，**根路由會被渲染到<Router/>指定的位置，而子路由則會作為子元件，將children物件以引數方式傳入父元件，由父元件將該物件指定渲染位置**。這也是為什麼在典型程式碼中vue-router沒有寫路由的父子關係而react-router的典型程式碼體現了父子路由關係的原因。

#### 使用時的不同點總結：
- vue-router是全域性配置方式，react-router是全域性元件方式。
- vue-router僅支援物件形式的配置，react-router支援物件形式和JSX語法的元件形式配置。
- vue-router任何路由元件都會被渲染到<router-view/>位置，react-router子元件作為children被傳入父元件，而根元件被渲染到<Router/>位置。