前端路由原理

2022-07-27 22:51:10 字數 783 閱讀 4782

參考

多頁面應用

vue-router 提供了三種模式來實現前端路由:1.hash模式 2.history模式 3.abstract模式。hash模式與history模式,這兩種模式都是通過瀏覽器介面實現的,除此之外vue-router還為非瀏覽器環境準備了乙個abstract模式,其原理為用乙個陣列stack模擬出瀏覽器歷史記錄棧的功能。這裡主要講解hash模式和history模式實現前端路由的原理。

知道上面的知識後我們看下實現其應該滿足的條件

​ 2. hash值的改變會在瀏覽器的訪問歷史中增加一條記錄,我們可以通過瀏覽器的後退,前進按鈕控制hash值的切換。

3. 我們可以通過hashchange事件,監聽到hash值的變化,從而載入不同的頁面顯示。

history物件方法:

html5新介面:history.pushstate(stateobj,title,url)

popstate事件觸發:每當同乙個文件的瀏覽歷史(即history物件)出現變化時,就會觸發popstate事件

**實現

123

本地執行可能報錯,不過可以試試在隨便開啟乙個頁面 用history.pushstate()試試,頁面還是無重新整理的

前端路由原理

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

前端路由原理

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

前端路由原理

四.history 模式 五.兩種模式的區別 前端路由實現起來其實很簡單,本質就是監聽 url 的變化,然後匹配路由規則,顯示相應的頁面,並且無須重新整理頁面。hash變化會觸發網頁跳轉,既瀏覽器的前進和後退 hash變化不會重新整理頁面,spa必需的特點 hash永遠不會提交到server端 前端...