vue多頁面配置詳情

Posted on by

1、多頁面的區別

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

2、SPA 與 MPA

單頁應用（SinglePage Web Application，簡稱 SPA）和多頁應用（MultiPage Application，簡稱 MPA）的區別如下：

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

3、Vue Cli 腳手架配置

第一步：

我們在public 文件下建一個主頁面 建一個副頁面,目錄結構如下

第二步：

有瞭主頁面和副頁面就要有對應的主頁面的入口文件和副頁面的入口文件，目錄結構如下

第三步：

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

到此這篇關於vue多頁面配置詳情的文章就介紹到這瞭,更多相關vue多頁面配置內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：