前端路由的介紹

2021-09-26 21:50:20 字數 1243 閱讀 8423

路由這個概念最先是後端出現的。在以前用模板引擎開發頁面時,經常會看到這樣

大致流程可以看成這樣:

瀏覽器發出請求

伺服器監聽到80埠(或443)有請求過來,並解析url路徑

根據伺服器的路由配置,返回相應資訊(可以是 html 字串,也可以是 json 資料,等)

瀏覽器根據資料報的 content-type 來決定如何解析資料

簡單來說路由就是用來跟後端伺服器進行互動的一種方式,通過不同的路徑,來請求不同的資源,請求不同的頁面是路由的其中一種功能。

前端路由

hash 模式

隨著 ajax 的流行,非同步資料請求互動執行在不重新整理瀏覽器的情況下進行。而非同步互動體驗的更高階版本就是 spa —— 單頁應用。單頁應用不僅僅是在頁面互動是無重新整理的,連頁面跳轉都是無重新整理的,為了實現單頁應用,所以就有了前端路由。

類似於服務端路由,前端路由實現起來其實也很簡單,就是匹配不同的 url 路徑,進行解析,然後動態的渲染出區域 html 內容。但是這樣存在乙個問題,就是 url 每次變化的時候,都會造成頁面的重新整理。那解決問題的思路便是在改變 url 的情況下,保證頁面的不重新整理。在 2014 年之前,大家是通過 hash 來實現路由,url hash 就是類似於:

這種 #。後面 hash 值的變化,並不會導致瀏覽器向伺服器發出請求,瀏覽器不發出請求,也就不會重新整理頁面。另外每次 hash 值的變化,還會觸發hashchange 這個事件,通過這個事件我們就可以知道 hash 值發生了哪些變化。然後我們便可以監聽hashchange來實現更新頁面部分內容的操作:

function matchandupdate ()

window.addeventlistener(『hashchange』, matchandupdate)

2. history 模式

14年後,因為html5標準發布。多了兩個 api,pushstate 和 replacestate,通過這兩個 api 可以改變 url 位址且不會傳送請求。同時還有 popstate 事件。通過這些就能用另一種方式來實現前端路由了,但原理都是跟 hash 實現相同的。用了 html5 的實現,單頁路由的 url 就不會多出乙個#,變得更加美觀。但因為沒有 # 號,所以當使用者重新整理頁面之類的操作時,瀏覽器還是會給伺服器傳送請求。為了避免出現這種情況,所以這個實現需要伺服器的支援,需要把所有路由都重定向到根頁面。

function matchandupdate ()

window.addeventlistener(『popstate』, matchandupdate)

AngularJs的前端路由

部分 片段如下 宣告模組 angular.module starter ionic ngcordova starter.controllers starter.services 在專案啟動前的配置 config function stateprovider,urlrouterprovider url...

前端路由的原理

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

前端路由的原理

簡單的說就是用來分發請求。用來分發請求的東西。一般前端會有乙個預設路由,如果只輸入主網域名稱,相當於 那麼路由會跳轉到預設路由,預設路由必須需要設定的。而保底路由則是路由路徑不正確時會跳轉的路由。而不管是預設路由還是保底路由,對應路由的是相應的元件,元件可大可小,可以為整個頁面也可是一行文字。路由表...