對於前端路由應該都很熟悉了，開發過spa應用的應該都用過，只是很少人去查一下前端路由實現的原理。
前端路由的實現核心問題有兩個，乙個是改變url不重新整理，另乙個是監聽url變化。主要靠的就是hash和history兩個方式。
先看看hash，hash屬性是url的錨部分，從#開始的部分，以前很多時候用來頁面的錨點導航。hash改變，頁面不會重新整理。js也提供了hashchange事件用來監聽urlhash的變化。
先看個效果：
history實現就比較複雜一些，history提供了pushstate和replacestate兩個api，通過這兩個方法改變url不會重新整理頁面。但是監聽url變化的事件popstate，只能是瀏覽器前進後退。所以我們要通過其他方法實現監聽。
效果：
**：home
about
其實前端路由實現的原理很簡單，只是這最簡單的實現在開發中並沒什麼用，我們還需要加很多方法，比如動態路由、路由傳參、子路由等等。
最後附上一段**：
前端路由原理
簡單來說，假如我們有一台提供 web 服務的伺服器的網路位址是 10.0.0.1，而該 web 服務又提供了三個可供使用者訪問的頁面，其頁面 uri 分別是 about concat 那麼其路徑就分別是 about，concat。當使用者使用 about 來訪問該頁面時，web 服務會接收到這個請求...
前端路由原理
四.history 模式 五.兩種模式的區別 前端路由實現起來其實很簡單，本質就是監聽 url 的變化，然後匹配路由規則，顯示相應的頁面，並且無須重新整理頁面。hash變化會觸發網頁跳轉，既瀏覽器的前進和後退 hash變化不會重新整理頁面，spa必需的特點 hash永遠不會提交到server端 前端...
前端路由原理
參考 多頁面應用 vue router 提供了三種模式來實現前端路由 1.hash模式 2.history模式 3.abstract模式。hash模式與history模式，這兩種模式都是通過瀏覽器介面實現的，除此之外vue router還為非瀏覽器環境準備了乙個abstract模式，其原理為用乙個陣...