區別：1、react路由是全域元件方式，vue路由是全域配置方式；2、react路由支援物件和jsx語法的元件形式配置，vue路由只支援物件形式配置；3、vue路由任何元件都會被渲染到“
”，而react路由則不是。
本教學操作環境：Windows10系統、react17.0.1版、Dell G3電腦。
總的來說，二者的設計理念大致相同，但是由於對應的框架分別是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({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>
)
}
// ...
```兩個典型程式碼其實是有差別的。
看似都實作了根路由和兩個自訂路由，但這裡用的react-router的典型程式碼實際上採用了子路由的方式，而vue-router只用了並列層級的路由。之所以放這兩種不同的典型程式碼，實際上這樣比較容易對比出二者的差異。
- 先定義元件。定義Foo元件和Bar元件的方式的區別是VUE和React框架語法層級的區別，不在我們的討論範圍之內。
- 元件定義好之後，設定url和元件的對應關係。在典型程式碼中，vue-router定義了一個routes對象，它是一個數組，數組中每個對象表示該對應關係。而react-router定義採用了JSX方式，清楚地表示了這個對應關係，以及和/路由的父子關係。要注意的是：VUE的路由配置要提供給new VueRouter()對象，這個對像要在全域VUE對像初始化時提供；而React路由則需要配置給全域
- 子路由配置。 vue-router在典型程式碼中並沒有體現如何設定子路由，其實就vue-router路由元件的使用來說，無論是哪個層級的路由元件，**都會被渲染到父元件
# 使用時的不同點總結：
推薦學習：《react影片教學
》###以上是react和vue的路由有什麼差別的詳細內容。更多資訊請關注PHP中文網其他相關文章！
