單頁面應(yīng)用
第一次進入頁面時會請求一個
html文件，刷新清除一下，切換到其他組件，此時路徑也相應(yīng)變化，但是并沒有新的html文件請求，頁面內(nèi)容卻變化了。
原理： js會感知到url的變化，通過這一點可以用js動態(tài)地將當前頁面的內(nèi)容清除，然后將下一個頁面的內(nèi)容掛載到當前頁面上。這個時候的路由不再是后端來做了，而是前端來做，判斷頁面顯示相應(yīng)的組件，清除不需要的。
頁面跳轉(zhuǎn)： js渲染
優(yōu)點： 頁面切換快
缺點： 首屏時間稍慢，SEO差
1. 為什么頁面切換快？
頁面每次切換跳轉(zhuǎn)時，并不需要處理html文件的請求，這樣就節(jié)約了很多HTTP發(fā)送時延，所以我們在切換頁面的時候速度很快。
2. 為什么首屏時間慢，SEO 差？
單頁應(yīng)用的首屏時間慢，首屏時需要請求一次html，同時還要發(fā)送一次js請求，兩次請求回來了，首屏才會展示出來。相對于多頁面應(yīng)用，首屏時間慢。
SEO效果差，因為搜索引擎只認識html里的內(nèi)容，不認識js渲染生成的內(nèi)容，搜索引擎不識別，也就不會給一個好排名，會導(dǎo)致單頁應(yīng)用做出來的網(wǎng)頁在搜索引擎上的排名差。
3. 為什么還要用 Vue 呢？
Vue官方提供了一些其他的技術(shù)來解決這些缺點，比如服務(wù)端渲染技術(shù)（SSR），通過這些技術(shù)可以完美解決這些缺點，這樣一來單頁面應(yīng)用對于前端來說就是非常完美的頁面開發(fā)解決方案了。
多頁面應(yīng)用
每一次頁面跳轉(zhuǎn)的時候，后臺服務(wù)器都會返回一個新的
html文檔，這種類型的網(wǎng)站也就是多頁網(wǎng)站，也叫多頁應(yīng)用。
頁面跳轉(zhuǎn)： 返回HTML
優(yōu)點： 首屏時間快，SEO效果好
缺點： 頁面切換慢
1. 為什么多頁應(yīng)用的首屏時間快？
首屏時間叫做頁面首個屏幕的內(nèi)容展現(xiàn)的時間，當我們訪問頁面的時候，服務(wù)器返回一個html，頁面就會展示出來，這個過程只經(jīng)歷了一個HTTP請求，所以頁面展示的速度非常快。
2. 為什么搜索引擎優(yōu)化效果好（SEO）？
搜索引擎在做網(wǎng)頁排名的時候，要根據(jù)網(wǎng)頁的內(nèi)容才能給網(wǎng)頁權(quán)重，來進行網(wǎng)頁的排名。搜索引擎是可以識別html內(nèi)容的，而我們每個頁面所有的內(nèi)容都放在html中，所以這種多頁應(yīng)用SEO排名效果好。
3. 缺點：切換慢
每次跳轉(zhuǎn)都需要發(fā)送一個HTTP請求，如果網(wǎng)絡(luò)狀態(tài)不好，在頁面間來回跳轉(zhuǎn)時，就會發(fā)生明顯的卡頓，影響用戶體驗。
總結(jié)
| / | 多頁面應(yīng)用模式MPA | 單頁面應(yīng)用模式SPA |
|---|---|---|
| 應(yīng)用構(gòu)成 | 由多個完整頁面構(gòu)成 | 一個外殼頁面和多個頁面片段構(gòu)成 |
| 跳轉(zhuǎn)方式 | 頁面之間的跳轉(zhuǎn)是從一個頁面到另一個頁面 | 一個頁面片段刪除或隱藏，加載另一個頁面片段并顯示。片段間的模擬跳轉(zhuǎn)，沒有開殼頁面 |
| 跳轉(zhuǎn)后公共資源是否重新加載 | 是 | 否 |
| URL模式 |
http://xxx/page1.html和http://xxx/page2.html
|
http://xxx/shell.html#page1和http://xxx/shell.html#page2
|
| 用戶體驗 | 頁面間切換加載慢，不流暢，用戶體驗差，尤其在移動端 | 頁面片段間切換快，用戶體驗好，包括移動設(shè)備 |
| 能否實現(xiàn)轉(zhuǎn)場動畫 | 否 | 容易實現(xiàn)（手機APP動效） |
| 頁面間傳遞數(shù)據(jù) | 依賴URL、cookie或者localstorage，實現(xiàn)麻煩 |
頁面?zhèn)鬟f數(shù)據(jù)容易（Vuex或Vue中的父子組件通訊props對象） |
| 搜索引擎優(yōu)化（SEO） | 可以直接做 | 需要單獨方案（SSR） |
| 特別適用的范圍 | 需要對搜索引擎友好的網(wǎng)站 | 對體驗要求高，特別是移動應(yīng)用 |
| 開發(fā)難度 | 較低，框架選擇容易 | 較高，需要專門的框架來降低這種模式的開發(fā)難度 |
