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

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

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

1. 后端路由

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

2. 前端路由

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

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

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

猜你喜歡：

Vue常用的指令都有哪些?

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

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

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

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