此篇我們來瞅一瞅SPA，啥是SPA啊，實際上一點也不神秘，就是單頁應用，可能有的同學又會問了，啥是單頁面應用，別着急，我們慢慢來看
首先我們先來了解一下單頁應用出現背景
背景：
在早期的 Web 應用中，前端的作用很弱，業務邏輯和數據處理都在后端，后端給前端返回一個 HTML 頁面，前端只負責展示。在這種模式下，單個 HTML 頁面被當做一個功能原件，表單提交，超鏈接跳轉都可以用來重新請求新的 HTML 頁面，從而達到給用戶展示新的頁面的目的。在這種方式中，你可以感覺到頁面總是在不停的刷新，一個點擊可能都需要等待很久，這是因為，當頁面變化時，所有資源都需要重新請求。這些問題導致了用戶體驗不佳，也浪費了資源。單頁應用便很好的解決了這些問題
概念：
什么是單頁應用呢？單頁應用的全稱是 single-page application，簡稱 SPA，它是一種網站應用的模型，它可以動態重寫當前的頁面來與用戶交互，而不需要重新加載整個頁面。單頁應用的流暢性讓 Web 應用更像桌面端或 Native 應用了。相對於傳統的 Web 應用，單頁應用做到了前后端分離，后端只負責處理數據提供接口，頁面邏輯和頁面渲染都交給了前端。前端發展到現在，單頁應用的使用已經很廣泛，目前時興的 React、Vue、Angular 等前端框架均采用了 SPA 原則。單頁應用意味着前端掌握了主動權，也讓前端代碼更復雜和龐大，模塊化、組件化以及架構設計都變得越來越重要
工作原理:
SPA 的一個重要實現就是改變路由時，頁面不刷新。實現這個功能，通常有兩種方式：使用 window.history 對象或 location.hash。
window.history 包含了瀏覽器的歷史信息，它有以下幾種常用方法：
-
-
history.back()：與在瀏覽器點擊后退按鈕相同；
-
-
-
history.forward()：與在瀏覽器中點擊按鈕向前相同；
-
-
-
history.go(n)：接受一個整數作為參數，移動到該整數指定的頁面，比如 go(1) 相當於 forward()，go(-1) 相當於 back()，go(0) 相當於刷新當前頁面。
-
HTML5 對 history 對象新增了 pushState() 和 replaceState() 方法，這兩個方法可以往歷史棧中添加數據，給用戶的感覺就是瀏覽器的 url 改變了，但是頁面並沒有重新加載。pushState() 是在瀏覽記錄中添加一個新記錄，replaceState() 則是修改當前的瀏覽器記錄，這是二者的細微差別，使用時參數的字段和含義都是一樣的。
window.history.pushState(state, title, url)
-
hash 是 location 對象的屬性，它指的是當前 url 的錨，也就是從 # 號開始的部分。修改 location.hash 並監聽 window 的 hashchange 事件，也能達到同樣的目的。
SPA 可圈可點，現在已被大家廣泛使用，也得到了主流框架的支持，但是它也有局限性，我們將它的優缺點總結如下。
優缺點：
優點有：
-
無刷新體驗，用戶在切換頁面過程中不會頻繁被“打斷”，因為界面框架都在本地，對用戶的響應非常及時，因此提升了用戶體驗；
-
分離前后端關注點，前端負責界面顯示，后端負責數據存儲和計算，各司其職，不會把前后端的邏輯混雜在一起；
-
減輕服務器壓力，服務器只用出數據就可以，不用管展示邏輯和頁面合成，吞吐能力會提高幾倍；
-
API 共享，同一套后端程序代碼，不用修改就可以用於Web界面、手機、平板等多種客戶端；
-
完全的前端組件化，前端開發不再以頁面為單位，更多地采用組件化的思想，代碼結構和組織方式更加規范化，便於修改和調整。
缺點有：
-
對 SEO 不太優好，盡管可以通過 Prerender 預渲染優化等技術解決一部分，但是相對還是不容易索引到它；
-
易出錯，需要使用程序管理前進、后退、地址欄等信息；
-
較高的前端開發門檻，對技術能力要求較高，需要對設計模式有一定理解，因為面對不是一個簡單的頁面，而是一個運行在瀏覽器環境里面的桌面軟件。
轉載自：https://www.yuque.com/fe9/basic/ag975a