【Vue17】單頁應用和多頁應用
多頁應用
每一次頁面跳轉的時候，後臺伺服器都會給返回一個新的html文件，這種型別的網站也就是多頁網站，也叫做多頁應用。
為什麼多頁應用的首屏時間快？
首屏時間叫做頁面首個螢幕的內容展現的時間，當我們訪問頁面的時候，伺服器返回一個html，頁面就會展示出來，這個過程只經歷了一個HTTP請求，所以頁面展示的速度非常快。
為什麼搜尋引擎優化效果好（SEO）？
搜尋引擎在做網頁排名的時候，要根據網頁內容才能給網頁權重，來進行網頁的排名。搜尋引擎是可以識別html內容的，而我們每個頁面所有的內容都放在Html中，所以這種多頁應用，seo排名效果好。
但是它也有缺點，就是切換慢
因為每次跳轉都需要發出一個http請求，如果網路比較慢，在頁面之間來回跳轉時，就會發現明顯的卡頓。
單頁應用
第一次進入頁面的時候會請求一個html檔案，重新整理清除一下。切換到其他元件，此時路徑也相應變化，但是並沒有新的html檔案請求，頁面內容也變化了。
原理是：JS會感知到url的變化，通過這一點，可以用js動態的將當前頁面的內容清除掉，然後將下一個頁面的內容掛載到當前頁面上，這個時候的路由不是後端來做了，而是前端來做，判斷頁面到底是顯示哪個元件，清除不需要的，顯示需要的元件。這種過程就是單頁應用，每次跳轉的時候不需要再請求html檔案了。
為什麼頁面切換快？
頁面每次切換跳轉時，並不需要做html檔案的請求，這樣就節約了很多http傳送時延，我們在切換頁面的時候速度很快。
缺點：首屏時間慢，SEO差
單頁應用的首屏時間慢，首屏時需要請求一次html，同時還要傳送一次js請求，兩次請求回來了，首屏才會展示出來。相對於多頁應用，首屏時間慢。
SEO效果差，因為搜尋引擎只認識html裡的內容，不認識js的內容，而單頁應用的內容都是靠js渲染生成出來的，搜尋引擎不識別這部分內容，也就不會給一個好的排名，會導致單頁應用做出來的網頁在百度和谷歌上的排名差。
有這些缺點，為什麼還要使用Vue呢？
Vue還提供了一些其它的技術來解決這些缺點，比如說伺服器端渲染技術(我是SSR)，通過這些技術可以完美解決這些缺點，解決完這些問題，實際上單頁面應用對於前端來說是非常完美的頁面開發解決方案。
新的更新
寫自2018年7月16日
最近在改造公司的專案，公司的專案是單頁應用，可能會改成多頁應用，所以對這塊又重新看了一下。在網上看到一個表格覺得總結的很到位，貼過來。出處是這裡：我是表格總結出處。
| mm | 多頁應用模式MPA | 單頁應用模式SPA |
|---|---|---|
| 應用構成 | 由多個完整頁面構成 | 一個外殼頁面和多個頁面片段構成 |
| 跳轉方式 | 頁面之間的跳轉是從一個頁面跳轉到另一個頁面 | 頁面片段之間的跳轉是把一個頁面片段刪除或隱藏，載入另一個頁面片段並顯示出來。這是片段之間的模擬跳轉，並沒有開殼頁面 |
| 跳轉後公共資源是否重新載入 | 是 | 否 |
| URL模式 | http://xxx/page1.html 和 http://xxx/page2.html |
http://xxx/shell.html#page1 和 http://xxx/shell.html#page2 |
| 使用者體驗 | 頁面間切換載入慢，不流暢，使用者體驗差，特別是在移動裝置上 | 頁面片段間的切換快，使用者體驗好，包括在移動裝置上 |
| 能否實現轉場動畫 | 無法實現 | 容易實現（手機app動效） |
| 頁面間傳遞資料 | 依賴URL、cookie或者localstorage，實現麻煩 |
因為在一個頁面內，頁面間傳遞資料很容易實現(這裡是我補充，父子之間傳值，或vuex或storage之類) |
| 搜尋引擎優化（SEO） | 可以直接做 | 需要單獨方案做，有點麻煩 |
| 特別適用的範圍 | 需要對搜尋引擎友好的網站 | 對體驗要求高的應用，特別是移動應用 |
| 搜尋引擎優化（SEO） | 可以直接做 | 需要單獨方案做，有點麻煩 |
| 開發難度 | 低一些，框架選擇容易 | 高一些，需要專門的框架來降低這種模式的開發難度 |