寫在前面：
這些年前端發展非常快，新的理念和框架不斷產出和發展，如當今火爆的Vue和React這樣的單頁面應用框架。
那麼大家對於單頁面應用和多頁面應用是否有系統的認知呢？如果你對二者的概念還很模糊，那麼本文將帶着大家從區別和對比的角度徹底搞定它們。
什麼是單頁面應用？
英文是SinglePage Web Application，簡稱SPA。 只有一個Web頁面的應用，單頁面跳轉就是切換相關組件，僅刷新局部資源，公共資源(js、html、css等)僅需加載一次。
什麼是多頁面應用？
英文名是MultiPage Application，簡稱MPA。顧名思義就是有多個獨立頁面的應用，每個頁面都會重複加載js、css等資源，多頁面跳轉需要刷新整頁的資源。
對比
| 單頁面應用(SPA) | 多頁面應用(MPA) | |
|---|---|---|
| 結構 | 一個主頁面+多個模塊的組件 | 多個完整的頁面 |
| 體驗 | 首屏時間較慢，SEO差，頁面切換快 | 首屏加載快，SEO效果好，頁面切換慢 |
| URL模式 | 如 xxx.com/#/index | 如 xxx.com/index.html |
| 適用場景 | 對體驗度和流暢度有較高要求，弱化SEO優化 | 對SEO要求較高，弱化頁面流暢度 |
| 轉場動畫 | 很多框架封裝好了動畫組件，容易實現 | 很難實現 |
| 路由模式 | 使用 hash 或者 history | 普通鏈接跳轉 |
| 數據傳遞 | 單頁面直接使用全局變量即可 | 使用cookie、localStorage等花緩存方案，URL參數，調用接口保存等 |
說明：
搜索引擎在記錄網站和自然排名有一套規則，對這套規則作出相應的優化便稱爲SEO 英文全稱Search Engine Optimization，中文叫搜索引擎優化。
由於搜索引擎蜘蛛或網絡爬蟲程序更擅長對靜態資源的抓取和更新，難以識別JS渲染生成的內容。對於多頁面應用來講，每個頁面內容都放靜態html中，更易被抓取識別到，這樣SEO效果就好。反觀單頁面應用，很多內容都是根據匹配到的路由動態獲取的，網絡抓取工具程序爬取困難，SEO效果自然就差。