快捷導(dǎo)航

vue多頁(yè)面配置詳情

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

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

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

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

2、SPA 與 MPA

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

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

3、Vue Cli 腳手架配置

第一步：

我們?cè)?code>public 文件下建一個(gè)主頁(yè)面建一個(gè)副頁(yè)面,目錄結(jié)構(gòu)如下

第二步：

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

第三步：

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

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'
    }
}