區(qū)別：1、react路由是全局組件方式，vue路由是全局配置方式；2、react路由支持對象和jsx語法的組件形式配置，vue路由只支持對象形式配置；3、vue路由任何組件都會被渲染到“<router-view/>”，而react路由不是。

本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。

react和vue的路由有什么區(qū)別

總的來說，二者的設(shè)計(jì)理念大致相同，但是由于對應(yīng)的框架分別是VUE和React，使得它們的使用方式略有些細(xì)微的差別。下文的著重點(diǎn)就是對比它們的差別部分。

無論是vue-router還是react-router，它們的最基本的初衷就是實(shí)現(xiàn)前端路由。所謂前端路由，簡單來說，就是當(dāng)瀏覽器的url產(chǎn)生變化時(shí)，不向服務(wù)器進(jìn)行請求，而是直接控制前端頁面產(chǎn)生變化，以期待前端在比如功能切換時(shí)，產(chǎn)生類似頁面跳轉(zhuǎn)等效果。

而這里面最基本的，無論是vue-router還是react-router，都要提供一種配置方式，讓使用者可以**配置出url路徑和要展示的組件的對應(yīng)關(guān)系**。這樣一來，用戶通過頁面點(diǎn)擊或者其他方式觸發(fā)瀏覽器url變化時(shí)，VUE或者React系統(tǒng)就可以找到這個(gè)url對應(yīng)的VUE組件或者React組件，從而有針對性地，將這個(gè)組件在頁面上渲染。

##### 典型代碼： ###### 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({undefined   routes }) const app = new Vue({undefined   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({undefined   render() {undefined     return<div>Foo</div>   } }) ``` ``` // modules/Bar.js import React from 'react' export default React.createClass({undefined   render() {undefined     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() {undefined     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>     )   } // ... ```

兩個(gè)典型代碼實(shí)際上是有區(qū)別的。

看似都實(shí)現(xiàn)了根路由和兩個(gè)自定義路由，但是這里用的react-router的典型代碼實(shí)際上采用了子路由的方式，而vue-router僅用了并列級別的路由。之所以放這兩種不同的典型代碼，實(shí)際上這樣更容易對比出二者的區(qū)別。

– 首先定義組件。定義Foo組件和Bar組件的方式的區(qū)別是VUE和React框架語法級別的區(qū)別，不在我們的討論范圍之內(nèi)。

– 組件定義好之后，配置url和組件的對應(yīng)關(guān)系。在典型代碼中，vue-router定義了一個(gè)routes對象，它是一個(gè)數(shù)組，數(shù)組中每個(gè)對象表示該對應(yīng)關(guān)系。而react-router定義采用了JSX方式，清晰地表示了這個(gè)對應(yīng)關(guān)系，以及和/路由的父子關(guān)系。需要注意的是：VUE的路由配置要提供給new VueRouter()對象，這個(gè)對象要在全局VUE對象初始化時(shí)提供；而React路由則需要配置給全局<Router/>組件，雖然react-router也提供類似于vue-router典型代碼中的對象數(shù)組形式的配置方式，但是最終仍是要將配置傳遞給<Router/>。**一個(gè)是全局配置(VUE)，一個(gè)是全局組件(React)，這是兩者使用上的根本區(qū)別之一。**(vue-router并不提供像JSX這種類html的配置方式，它只能以對象方式提供路由配置，這也是框架系統(tǒng)不同所決定的)

– 子路由配置。vue-router在典型代碼中并沒有體現(xiàn)如何配置子路由，其實(shí)就vue-router路由組件的使用來說，無論是哪個(gè)級別的路由組件，**都會被渲染到父組件<router-view/>組件標(biāo)識的地方**。對于react-router，**根路由會被渲染到<Router/>指定的位置，而子路由則會作為子組件，將children對象以參數(shù)方式傳入父組件，由父組件將該對象指定渲染位置**。這也是為什么在典型代碼中vue-router沒有寫路由的父子關(guān)系而react-router的典型代碼體現(xiàn)了父子路由關(guān)系的原因。

#### 使用時(shí)的不同點(diǎn)總結(jié)：

• – vue-router是全局配置方式，react-router是全局組件方式。

• – vue-router僅支持對象形式的配置，react-router支持對象形式和JSX語法的組件形式配置。

• – vue-router任何路由組件都會被渲染到<router-view/>位置，react-router子組件作為children被傳入父組件，而根組件被渲染到<Router/>位置。

推薦學(xué)習(xí)：《react視頻教程》