頁(yè)面路由是什么意思？【圖文介紹前后端路由】

提到路由，大家一般會(huì)想到生活中常見(jiàn)的路由器，路由器主要用于連接多個(gè)邏輯上分開(kāi)的網(wǎng)絡(luò)，邏輯網(wǎng)絡(luò)代表-個(gè)單獨(dú)的網(wǎng)絡(luò)或者一個(gè)子網(wǎng)，可以通過(guò)路由器功能來(lái)完成不同網(wǎng)絡(luò)之間數(shù)據(jù)的傳遞。在Vue中也引人了路由的概念，因此，我們先來(lái)對(duì)程序開(kāi)發(fā)中的路由進(jìn)行簡(jiǎn)單地了解。

程序開(kāi)發(fā)中的路由分為后端路由和前端路由，下面我們分別進(jìn)行簡(jiǎn)要介紹。

1. 后端路由

后端路由通過(guò)用戶(hù)請(qǐng)求的URL分發(fā)到具體的處理程序，瀏覽器每次跳轉(zhuǎn)到不同的URL都會(huì)重新訪問(wèn)服務(wù)器。服務(wù)器收到請(qǐng)求后，將數(shù)據(jù)和模板組合，返回HTML頁(yè)面，或者直接返回HTML模板，由前端JavaScript程序再去請(qǐng)求數(shù)據(jù)，使用前端模板和數(shù)據(jù)進(jìn)行組合生成最終的HTML頁(yè)面。下圖演示了后端路由的工作原理。

2. 前端路由

前端路由就是把不同路由對(duì)應(yīng)不同的內(nèi)容或頁(yè)面的任務(wù)交給前端來(lái)做。前端路由和后端路由的原理是類(lèi)似的，但是實(shí)現(xiàn)的方式不一樣。對(duì)于單頁(yè)面應(yīng)用(Single Page Application, SPA)來(lái)說(shuō)，主要通過(guò)URL中的hash(#號(hào))來(lái)實(shí)現(xiàn)不同頁(yè)面之間的切換。hash有一個(gè)特點(diǎn)，就是HTTP請(qǐng)求中不會(huì)包含hash相關(guān)的內(nèi)容,所以單頁(yè)面程序中的頁(yè)面跳轉(zhuǎn)主要用hash來(lái)實(shí)現(xiàn)。

下圖演示了前端路由的工作原理。

在上圖中，index.html 后面的‘#home”是hash方式的路由，由前端路由來(lái)處理，將hash值與頁(yè)面中的組件對(duì)應(yīng)，當(dāng)hash值為“#/home” 時(shí)，就顯示“首頁(yè)”組件。前端路由在訪問(wèn)一個(gè)新頁(yè)面的時(shí)候僅僅是變換了一下hash值而已，沒(méi)有和服務(wù)端交互，所以不存在網(wǎng)絡(luò)延遲，提升了用戶(hù)體驗(yàn)。

猜你喜歡：

Vue常用的指令都有哪些?

vue全家桶有哪些東西？具體指什么？

Vue數(shù)據(jù)雙向綁定的原理是什么?

vue router的模式有哪幾種?[vue router的工作原理]

黑馬程序員web前端開(kāi)發(fā)高手班課程