這篇文章主要介紹了vue多頁面配置，單頁應(yīng)用這個概念，是隨著前幾年 AngularJS、React、Ember 等這些框架的出現(xiàn)而出現(xiàn)的。在前面的前言內(nèi)容里，我們在頁面渲染中講了頁面的局部刷新,而單頁應(yīng)用則是使用了頁面的局部刷新的能力,下面來看看詳細(xì)內(nèi)容,需要的朋友可以參考一下

1、多頁面的區(qū)別

單頁應(yīng)用這個概念，是隨著前幾年 AngularJS、React、Ember 等這些框架的出現(xiàn)而出現(xiàn)的。在前面的前言內(nèi)容里，我們在頁面渲染中講了頁面的局部刷新，而單頁應(yīng)用則是使用了頁面的局部刷新的能力，在切換頁面的時候刷新頁面內(nèi)容，從而獲取更好的體驗。

2、SPA 與 MPA

單頁應(yīng)用（SinglePage Web Application，簡稱 SPA）和多頁應(yīng)用（MultiPage Application，簡稱 MPA）的區(qū)別如下：

標(biāo)題	SPA	MPA
組成	一個主頁面 + 多個頁面片段	多個完整頁面
資源共用(css,js)	共用的資源只需要加載一次	每個頁面都需要加載公用的資源
url 模式	xxx/#/page1 xxx/#/page2	xxx/page1.html xxx/page2.html
刷新方式	頁面局部刷新或更改	整頁刷新
頁面跳轉(zhuǎn)	外殼不變，更新局部頁面內(nèi)容，容易實現(xiàn)跳轉(zhuǎn)動畫	從一個頁面跳轉(zhuǎn)到另一個頁面，無法實現(xiàn)跳轉(zhuǎn)動畫
用戶體驗	頁面片段間切換快，用戶體驗好	頁面切換需要重新加載，比較慢且流暢度低，用戶體驗較差
數(shù)據(jù)傳遞	同一個頁面，全局變量等很容易實現(xiàn)	依賴 url 傳參、或者 cookie 、localStorage 等，實現(xiàn)麻煩
搜索引擎優(yōu)化(SEO)	實現(xiàn)較為困難，不利于 SEO 檢索	實現(xiàn)方法簡單
適用場景	對體驗要求高的應(yīng)用	需要對搜索引擎友好的應(yīng)用

3、Vue Cli 腳手架配置

第一步：

我們在public 文件下建一個主頁面建一個副頁面,目錄結(jié)構(gòu)如下

第二步：

有了主頁面和副頁面就要有對應(yīng)的主頁面的入口文件和副頁面的入口文件，目錄結(jié)構(gòu)如下

第三步：

vue.config.js中配置pages，可以理解為多頁面的配置映射。

pages: {
    index: {
        entry: 'src/main.js',
        template: 'public/index.html',
        filename: 'index.html',
    },
    bangban: {
        entry: 'src/banban.js',
        template: 'bangban.html',
        filename: 'public/bangban.html'
    }
}