這篇文章主要介紹“react和vue的路由有哪些區(qū)別”，在日常操作中，相信很多人在react和vue的路由有哪些區(qū)別問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”react和vue的路由有哪些區(qū)別”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
成都創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司一直秉承“誠(chéng)信做人，踏實(shí)做事”的原則，不欺瞞客戶，是我們最起碼的底線！ 以服務(wù)為基礎(chǔ)，以質(zhì)量求生存，以技術(shù)求發(fā)展，成交一個(gè)客戶多一個(gè)朋友！專(zhuān)注中小微企業(yè)官網(wǎng)定制，成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)，塑造企業(yè)網(wǎng)絡(luò)形象打造互聯(lián)網(wǎng)企業(yè)效應(yīng)。
區(qū)別：1、react路由是全局組件方式，vue路由是全局配置方式；2、react路由支持對(duì)象和jsx語(yǔ)法的組件形式配置，vue路由只支持對(duì)象形式配置；3、vue路由任何組件都會(huì)被渲染到“
”，而react路由不是。
本教程操作環(huán)境：Windows10系統(tǒng)、react17.0.1版、Dell G3電腦。
總的來(lái)說(shuō)，二者的設(shè)計(jì)理念大致相同，但是由于對(duì)應(yīng)的框架分別是VUE和React，使得它們的使用方式略有些細(xì)微的差別。下文的著重點(diǎn)就是對(duì)比它們的差別部分。
無(wú)論是vue-router還是react-router，它們的最基本的初衷就是實(shí)現(xiàn)前端路由。所謂前端路由，簡(jiǎn)單來(lái)說(shuō)，就是當(dāng)瀏覽器的url產(chǎn)生變化時(shí)，不向服務(wù)器進(jìn)行請(qǐng)求，而是直接控制前端頁(yè)面產(chǎn)生變化，以期待前端在比如功能切換時(shí)，產(chǎn)生類(lèi)似頁(yè)面跳轉(zhuǎn)等效果。
而這里面最基本的，無(wú)論是vue-router還是react-router，都要提供一種配置方式，讓使用者可以**配置出url路徑和要展示的組件的對(duì)應(yīng)關(guān)系**。這樣一來(lái)，用戶通過(guò)頁(yè)面點(diǎn)擊或者其他方式觸發(fā)瀏覽器url變化時(shí)，VUE或者React系統(tǒng)就可以找到這個(gè)url對(duì)應(yīng)的VUE組件或者React組件，從而有針對(duì)性地，將這個(gè)組件在頁(yè)面上渲染。
重慶分公司
重慶分公司
##### 典型代碼：
###### vue-router
JS:
```
const Foo = { template: 'foo' }
const Bar = { template: 'bar' }
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:
```
Hello App!
Go to Foo
Go to Bar
兩個(gè)典型代碼實(shí)際上是有區(qū)別的。
看似都實(shí)現(xiàn)了根路由和兩個(gè)自定義路由，但是這里用的react-router的典型代碼實(shí)際上采用了子路由的方式，而vue-router僅用了并列級(jí)別的路由。之所以放這兩種不同的典型代碼，實(shí)際上這樣更容易對(duì)比出二者的區(qū)別。
- 首先定義組件。定義Foo組件和Bar組件的方式的區(qū)別是VUE和React框架語(yǔ)法級(jí)別的區(qū)別，不在我們的討論范圍之內(nèi)。
- 組件定義好之后，配置url和組件的對(duì)應(yīng)關(guān)系。在典型代碼中，vue-router定義了一個(gè)routes對(duì)象，它是一個(gè)數(shù)組，數(shù)組中每個(gè)對(duì)象表示該對(duì)應(yīng)關(guān)系。而react-router定義采用了JSX方式，清晰地表示了這個(gè)對(duì)應(yīng)關(guān)系，以及和/路由的父子關(guān)系。需要注意的是：VUE的路由配置要提供給new VueRouter()對(duì)象，這個(gè)對(duì)象要在全局VUE對(duì)象初始化時(shí)提供；而React路由則需要配置給全局
- 子路由配置。vue-router在典型代碼中并沒(méi)有體現(xiàn)如何配置子路由，其實(shí)就vue-router路由組件的使用來(lái)說(shuō)，無(wú)論是哪個(gè)級(jí)別的路由組件，**都會(huì)被渲染到父組件
#### 使用時(shí)的不同點(diǎn)總結(jié)：
- vue-router是全局配置方式，react-router是全局組件方式。
- vue-router僅支持對(duì)象形式的配置，react-router支持對(duì)象形式和JSX語(yǔ)法的組件形式配置。
- vue-router任何路由組件都會(huì)被渲染到
到此，關(guān)于“react和vue的路由有哪些區(qū)別”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！
