更新時間:2021年12月22日18時11分 來源:傳智教育 瀏覽次數(shù):
提到路由,大家一般會想到生活中常見的路由器,路由器主要用于連接多個邏輯上分開的網(wǎng)絡,邏輯網(wǎng)絡代表-個單獨的網(wǎng)絡或者一個子網(wǎng),可以通過路由器功能來完成不同網(wǎng)絡之間數(shù)據(jù)的傳遞。在Vue中也引人了路由的概念,因此,我們先來對程序開發(fā)中的路由進行簡單地了解。
程序開發(fā)中的路由分為后端路由和前端路由,下面我們分別進行簡要介紹。
后端路由通過用戶請求的URL分發(fā)到具體的處理程序,瀏覽器每次跳轉到不同的URL都會重新訪問服務器。服務器收到請求后,將數(shù)據(jù)和模板組合,返回HTML頁面,或者直接返回HTML模板,由前端JavaScript程序再去請求數(shù)據(jù),使用前端模板和數(shù)據(jù)進行組合生成最終的HTML頁面。下圖演示了后端路由的工作原理。
前端路由就是把不同路由對應不同的內(nèi)容或頁面的任務交給前端來做。前端路由和后端路由的原理是類似的,但是實現(xiàn)的方式不一樣。對于單頁面應用(Single Page Application, SPA)來說,主要通過URL中的hash(#號)來實現(xiàn)不同頁面之間的切換。hash有一個特點,就是HTTP請求中不會包含hash相關的內(nèi)容,所以單頁面程序中的頁面跳轉主要用hash來實現(xiàn)。
下圖演示了前端路由的工作原理。
在上圖中,index.html 后面的‘#home”是hash方式的路由,由前端路由來處理,將hash值與頁面中的組件對應,當hash值為“#/home” 時,就顯示“首頁”組件。前端路由在訪問一個新頁面的時候僅僅是變換了一下hash值而已,沒有和服務端交互,所以不存在網(wǎng)絡延遲,提升了用戶體驗。
猜你喜歡:
vue-router如何實現(xiàn)實現(xiàn)單頁面前端路由?