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

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

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

1. 后端路由

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

2. 前端路由

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

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

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

猜你喜歡：

Vue常用的指令都有哪些?

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

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

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

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