勵志

勵志人生知識庫

後路由功能

後端路由是一種利用後端處理URL與頁面之間的映射關係的技術。在使用後端路由訪問頁面時,首先將請求傳送到伺服器,伺服器使用如JSPPHP等動態技術將數據添加到頁面中,並返回已經渲染好的HTML+CSS。在該域名中進行跳轉時,會重複請求伺服器,伺服器再次渲染頁面並進行返回。後端路由對搜尋引擎最佳化(SEO)很友好,但項目邏輯可能比較混亂,可讀性較差,維護成本較大。

後端路由進行頁面訪問時,伺服器會對URL進行正則匹配,並且最後交給一個Controller來處理。最終生成HTML返回給前端。

前後端分離的架構中,後端只提供數據,不提供頁面相關的結構。前端通過AJAX請求來動態地請求伺服器,此時可以請求頁面中部分的HTML代碼來進行懶載入。使用AJAX和前端路由的SPA(單頁套用)中,瀏覽器中顯示的大部分內容都是由前端寫的JS代碼在瀏覽器中執行並渲染出來的網頁。整個網頁只有一個HTML頁面,在請求發生後,瀏覽器會將HTML、CSS和全部的JS下載下來,並且將JS分為不同的塊,在URL發生變化後將抽取出的JS渲染成HTML到頁面上。

SPA前端路由改變URL的三種方法包括:

改變url的hash:`location.hash = 'index'`

使用history.pushState:`history.pushState([data:{}],[title:string],[url:string])` 使用這種模式會將url壓入棧中,並且使後退按鈕變為可用,使用後退會進行出棧操作`history.back()` 或 `history.go(-1)`

使用history.replace:`history.replace([data:{}],[title:string],[url:string])` 使用這種模式會對url進行替換,並不會壓入棧中。