vue多頁面配置詳情

更新時(shí)間：2021年11月08日 11:27:53 作者：zz

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

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

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

2、SPA 與 MPA

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

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

3、Vue Cli 腳手架配置

第一步：

我們在public 文件下建一個(gè)主頁面建一個(gè)副頁面,目錄結(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'
    }
}