spa前端路由的原理與實現方式

spa是什麼

百科：單頁Web應用（single page web application，SPA），就是隻有一張Web頁面的應用，是加載單個HTML 頁面並在用戶與應用程序交互時動態更新該頁面的Web應用程序。

單頁的頁面即爲一個html頁面，能夠理解爲，某個應用中全部的其餘頁面和單元均爲一個預設好的根頁面的子組件，經過js，css來控制衆多子組件的替換和更新，從而達到模擬頁面跳轉的情景。我把這種應用稱之爲spa。

前端路由的進化

提到了前端路由就不得不提到後端路由，一個後端路由能夠理解爲一個url發起一個請求，獲取數據（html模板，文本信息，圖片等）而後經過控制器處理後再向瀏覽器渲染處理事後的頁面，就會出現一個新的頁面。這個過程就是所謂的ssr。而後前端向後端請求資源的方式就是後端路由了。

後端路由的弊端

可是很明顯，每次須要更新頁面都須要發起新的請求，服務器壓力會很大，若是網絡情況很差，還會形成極差的用戶體驗。 可是，當Ajax出現以後，這種交互方式慢慢發生了改變。利用Ajax的異步加載的機制，能夠不須要刷新頁面便可發送新的請求。從而實現spa，提升用戶體驗，減小服務端壓力。

未利用前端路由的spa的弊端

凡事有利有弊，當時的spa也有本身的劣勢：

• spa沒法記住用戶的操做，前進後退，刷新都沒法展現用戶期待的內容
• spa會有多種業務頁面，一個url，seo不友好，不利於搜索引擎進行收錄

因而漸漸演化出了前端路由來解決上述兩個問題。 前端路由的目的：

• 當咱們改變url的時候，瀏覽器不會向服務器發起請求
• 實時監聽url的變化

前端路由的實現機制

• 監聽url中hash值得變化
• HTML5 history模式

hash

hash值得改變不會致使瀏覽器向服務器發送請求，而且改變的時候會觸發hashchange事件，hashchange能夠捕捉url的變化，從而實現spa。

https://blog.csdn.net/JaxHu/#collection-list
複製代碼

舉例，#collection-list 就是hash值，在H5的history模式出現以前，前端路由基本都是用hash模式來實現的。

history

History 路由是基於 HTML5 規範，在 HTML5 規範中提供了 history.pushState和history.replaceState 來進行路由控制。當你執行

history.pushState({}, null, ‘/home’) 
複製代碼

頁面 url 會從

http://localhost:8080/ 
複製代碼

跳轉到

http://localhost:8080/home 
複製代碼

能夠在改變 url 的同時，並不會刷新頁面。

先來簡單看看 pushState 的用法，參數說明以下：

• state：存儲 JSON 字符串，能夠用在 popstate 事件中
• title：如今大多瀏覽器忽略這個參數，直接用 null 代替
• url：任意有效的 URL，用於更新瀏覽器的地址欄

hash和history的對比

• hash兼容性高，甚至能夠兼容到老版本的IE瀏覽器

• history是基於H5的實現模式，對低版本瀏覽器不必定兼容

• hash模式會在url中夾帶#符號，看起來多多少少會有些不天然

• history模式不會有這種狀況

總結

具體的實現能夠去看看其餘大佬的文章，此文不作詳述。總以前端路由的目的是爲了頁面無刷新，而且能夠進行頁面的更替。