前端路由的原理

2021-10-08 08:12:47 字數 1071 閱讀 7310

簡單的說就是用來分發請求。

用來分發請求的東西。

一般前端會有乙個預設路由,如果只輸入主網域名稱,相當於/,那麼路由會跳轉到預設路由,預設路由必須需要設定的。

而保底路由則是路由路徑不正確時會跳轉的路由。

而不管是預設路由還是保底路由,對應路由的是相應的元件,元件可大可小,可以為整個頁面也可是一行文字。

路由表可以理解為就是乙個物件,物件用來記錄路由相關的歷史。我們可以通過路由表來進行回退或指定跳轉到某個路由。

const routetable = ;
路由可以再分層,例如1/2以/來分層,1為第一層,2為第二層。前面我們說過路由對應相應的元件,因此對應巢狀路由的頁面渲染效果就是巢狀元件。我們可以實現一層包裹一層的元件巢狀,通過路由來完成。

網域名稱後面帶#號的就是hash模式。

優點:適用範圍廣,pc、移動端都可以使用hash模式

缺點:seo模式不友好,伺服器收不到hash,簡單說伺服器收不到#號後面的字串嗎,只能收到網域名稱。

hash模式通過window.location.hash.substring(1) 進行取值

網域名稱後面沒帶#號的就是history模式,看起來與正常網域名稱路徑一致 。

優點:後端將所有前端路由都渲染到同一頁面,seo友好,伺服器能接收到history,也就是說伺服器能接收到完整的網頁路徑。

缺點:ie8以下不支援。想要把history模式玩好還需要後端配合,因為當頁面重新整理時history模式會向伺服器請求,這時候就需要伺服器對頁面的路由請求做處理。不做處理就會出現沒有響應的404。

history模式通過window.location.pathname進行取值。

xx.com

用物件來儲存路由(本地儲存),url沒有後面的引數,一般用到比較少。

前端路由的原理

一 什麼是路由?路由是根據不同的 url 位址展示不同的內容或頁面 二 什麼是前端路由?前端路由就是把不同路由對應不同的內容或頁面的任務交給前端來做 傳統的專案是服務端根據 url 的不同,返回不同的頁面實現的 三 什麼是後端路由?通過使用者請求的url導航到具體的html頁面 每跳轉到不同的url...

前端路由原理

簡單來說,假如我們有一台提供 web 服務的伺服器的網路位址是 10.0.0.1,而該 web 服務又提供了三個可供使用者訪問的頁面,其頁面 uri 分別是 about concat 那麼其路徑就分別是 about,concat。當使用者使用 about 來訪問該頁面時,web 服務會接收到這個請求...

前端路由原理

對於前端路由應該都很熟悉了,開發過spa應用的應該都用過,只是很少人去查一下前端路由實現的原理。前端路由的實現核心問題有兩個,乙個是改變url不重新整理,另乙個是監聽url變化。主要靠的就是hash和history兩個方式。先看看hash,hash屬性是url的錨部分,從 開始的部分,以前很多時候用...