教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

什么是路由?路由分為哪兩類?

更新時間:2021年12月22日18時11分 來源:傳智教育 瀏覽次數:

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

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

1. 后端路由

后端路由通過用戶請求的URL分發(fā)到具體的處理程序,瀏覽器每次跳轉到不同的URL都會重新訪問服務器。服務器收到請求后,將數據和模板組合,返回HTML頁面,或者直接返回HTML模板,由前端JavaScript程序再去請求數據,使用前端模板和數據進行組合生成最終的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-router如何實現(xiàn)實現(xiàn)單頁面前端路由?

vue-router工作原理:hash模式和history模式介紹

傳智教育web前端開發(fā)培訓課程

0 分享到:
和我們在線交談!