什麼是vue單頁和多頁面

在vue中，單頁面全名為“SPA單頁面應用”，是指只有一個主頁面的應用（一個html頁面），從而使整個頁面更加流暢；單頁應用提供的資訊和一些主要內容經過篩選和控制，可以簡單方便地閱讀和瀏覽。多頁面全名為“MPA多頁面應用程式”，是指包含多個獨立頁面的應用，其中每個頁面都必須重複載入JS，CSS等相關資源；多頁應用程式在跳轉時，需要刷新整頁資源。

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

vue中什麼是單頁面和多頁面

#單頁：全名為SPA單頁應用（SinglePage Web Application）。

單頁應用程式將所有內容放在一個頁面中，從而使整個頁面更加流暢。就使用者體驗而言，單機導航可以定位錨點，快速定位對應的部分，並輕鬆上下滾動。單一頁面應用程式提供的資訊和一些主要內容經過篩選和控制，可以簡單方便地閱讀和瀏覽。

多頁：全名為MPA多頁應用（MultiPage Application）。

多頁應用程式是指包含多個獨立頁面的應用，其中每個頁面都必須重複載入JS，CSS等相關資源。多頁應用程式在跳轉時，需要刷新整頁資源。 【相關推薦：vuejs影片教學、web前端開發】

#以下是大概的結構圖： 

單一頁面與多頁面的差異：

1 .刷新方式

SPA：相關元件切換，頁面局部刷新或更改

#MPA：整頁刷新

2.路由模式

SPA：可以使用hash，也可以使用history

MPA：普通連結跳轉

3.使用者體驗

SPA：頁面片段間時間的切換快，使用者體驗良好，當初次載入檔案過多時，需要做相關調優。

MPA：頁面切換載入緩慢，流暢度不夠，使用者體驗比較差，尤其網速慢的時候

4.轉場動畫

SPA：容易實現轉場動畫

MPA：無法實現轉場動畫

#5.資料傳遞

SPA：容易實現資料傳遞，方法有很多（透過路由帶參數傳值，Vuex傳值等等）

MPA：依賴url傳參，cookie，本地儲存

6.搜尋引擎最佳化（SEO ）

SPA：需要單獨方案，實現較為困難，不利於SEO檢索，可利用伺服器端渲染（SSR）優化

MPA：實作方法容易

7.使用範圍

SPA:高要求的體驗度，追求介面流暢的應用程式

MPA：適用於追求高度支援搜尋引擎的應用程式

8.開發成本

SPA：較高，長需要藉助專業的框架

MPA：較低，但也頁面程式碼重複的多重

9.維護成本

SPA：相對容易

#MPA：相對複雜

10.結構

SPA：一個主頁面許多模組的元件

MPA：許多完整的頁面

11.資源檔案

SPA：元件公用的資源只需要載入一次

MPA：每個頁面都需要自行載入公用的資源

（學習影片分享：vuejs入門教學、程式設計基礎影片）

以上是什麼是vue單頁和多頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！