正文

vue單頁面和多頁面的區(qū)別（vue多單頁面多tab）

發(fā)布時間：2023-04-19 10:11:48 稿源：創(chuàng)意嶺閱讀： 66

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關(guān)于vue單頁面和多頁面的區(qū)別的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

開始之前先推薦一個非常厲害的Ai人工智能工具，一鍵生成原創(chuàng)文章、方案、文案、工作計劃、工作報告、論文、代碼、作文、做題和對話答疑等等

只需要輸入關(guān)鍵詞，就能返回你想要的內(nèi)容，越精準(zhǔn)，寫出的就越詳細(xì)，有微信小程序端、在線網(wǎng)頁版、PC客戶端

官網(wǎng)：https://ai.de1919.com。

創(chuàng)意嶺作為行業(yè)內(nèi)優(yōu)秀的企業(yè)，服務(wù)客戶遍布全球各地，如需了解SEO相關(guān)業(yè)務(wù)請撥打電話175-8598-2043，或添加微信：1454722008

本文目錄:

1、web前端開之網(wǎng)站搭建框架之vue詳解
2、vue-router只能在vue中使用嗎
3、vue預(yù)渲染插件 prerender-spa-plugin（seo優(yōu)化，生成多頁面）
4、Vue多標(biāo)簽頁應(yīng)用解決方案

vue單頁面和多頁面的區(qū)別（vue多單頁面多tab）

一、web前端開之網(wǎng)站搭建框架之vue詳解

網(wǎng)站搭建框架之vue

Vue是web前端快速搭建網(wǎng)站的框架之一。它與jQuery有所不同，是以數(shù)據(jù)驅(qū)動web界面（以操作數(shù)據(jù)改變頁面，而jQuery是以操作節(jié)點來改變頁面），同時，vue還實現(xiàn)了數(shù)據(jù)的雙向綁定，可及時響應(yīng)用戶的輸入。最主要的是vue的寫法簡單，容易掌握，組件形式可以大大提高工作效率。

對于vue的使用可以分為兩種使用形式：1.引入vue.js文件，在js中將vue實例化；2.通過node安裝第三方包--vue，搭建腳手架，用腳手架將頁面分成幾個組件編寫，從而利用組件來搭建頁面。

引入vue.js的寫法

Vue分為V層（視圖層）和M層（數(shù)據(jù)層），一般都是由M層的數(shù)據(jù)來驅(qū)動V層的改變。而vue的常用指令數(shù)量不多且寫法簡單。常用的有v-html、v-text、v-show、v-if、v-else、v-for、v-bind:、v-model。v-html和v-text都是將數(shù)據(jù)寫進(jìn)標(biāo)簽內(nèi)，但它們的不同之處在于v-text會將標(biāo)簽當(dāng)做文本內(nèi)容寫入

，而v-html則會對標(biāo)簽進(jìn)行編譯，只顯示標(biāo)簽內(nèi)的內(nèi)容。

至于v-show、v-if、v-else這三個指令都是通過布爾值的判斷來執(zhí)行的，當(dāng)布爾值為真時，設(shè)置了v-show、v-if指令的標(biāo)簽會顯示出來，當(dāng)布爾值為假時，標(biāo)簽隱藏；而v-else與這兩個指令相反。除此之外，v-show和v-if、v-else之間也有差別，v-show是改變標(biāo)簽的display屬性來使標(biāo)簽顯示或隱藏；而v-if、v-else是通過添加或刪除節(jié)點，來顯示或隱藏標(biāo)簽的。

V-for是vue的一種遍歷方法，這個方法極大的簡化了數(shù)組或?qū)ο蟮谋闅v并顯示到頁面的步驟

而v-bind：是對html屬性或自定義屬性的數(shù)據(jù)驅(qū)動方式，格式為v-bind:href，可簡寫為：href。對于類（class）的操作是通過布爾值來判斷增加或者隱藏類，同時。類和樣式（style）所接受的數(shù)據(jù)類型為對象。

V-model指令的作用是將數(shù)據(jù)進(jìn)行雙向綁定，僅限于輸入類型標(biāo)簽。當(dāng)用戶在頁面輸入時，數(shù)據(jù)層的數(shù)據(jù)會跟著改變。這是VM模式。由v驅(qū)動m。

除了這些普通的指令之外，還有事件指令v-on:，可簡寫為@+事件名，例如：@click，并將執(zhí)行函數(shù)寫到vue的methods中

通過腳手架來寫項目的話，可用通過寫組件，再將組件引入（注冊）到另一個vue文件里拼接在一起，從而構(gòu)建出一個頁面。

（組件書寫格式）

（組件整合）

（注冊路由）

路由是通過vue-router來實現(xiàn)的，在注冊路由的時候要將router實例化。不同的路由跳轉(zhuǎn)不同的頁面，這是搭建單頁面應(yīng)用的優(yōu)勢。

而父組件與子組件之間的通訊可以通過props將父組件的信息傳遞給子組件，改變子組件的內(nèi)容，這樣子組件的復(fù)用就不會有障礙了，而子組件傳遞信息給父組件或者其他組件的通訊則需vuex。

通過引入vuex并實例化一個Vuex.Store作為一個公共平臺，將數(shù)據(jù)進(jìn)行傳輸。通過vue的computed方法接收數(shù)據(jù)，通過methods方法改變數(shù)據(jù)。而這個公用平臺可以實現(xiàn)組件與組件之間的信息傳遞，從而實現(xiàn)組件之間的交互。

通過一個星期的實戰(zhàn)，深深的體會到了vue的優(yōu)勢，在構(gòu)建移動端這方面的效率很高。但在搭建的過程中，還是少不了與jQuery結(jié)合，畢竟每個工具都有其優(yōu)點，擇其優(yōu)而用是明智的選擇。

二、vue-router只能在vue中使用嗎

vue-router只能在vue中使用。router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用。vue的單頁面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問路徑，并將路徑和組件映射起來。傳統(tǒng)的頁面應(yīng)用，是用一些超鏈接來實現(xiàn)頁面切換和跳轉(zhuǎn)的。在vue-router單頁面應(yīng)用中，則是路徑之間的切換，也就是組件的切換。

三、vue預(yù)渲染插件 prerender-spa-plugin（seo優(yōu)化，生成多頁面）

vue等框架打包的項目一般為SPA應(yīng)用，而單頁面是不利于SEO的，現(xiàn)在的解決方案有兩種：

注意：

然后在webpack.prod.conf.js里面添加：

在webpack.prod.conf.js的plugins里面添加：

最后在main.js里面修改：

安裝：

在main.js引入：

在vue頁面中配置：

四、Vue多標(biāo)簽頁應(yīng)用解決方案

應(yīng)用系統(tǒng)中需要運(yùn)用到多標(biāo)簽頁，跟瀏覽器一樣的效果，在新打開頁面后，動態(tài)追加一個頁簽，點擊頁簽可以切換系統(tǒng)主頁面區(qū)域的內(nèi)容，且保持內(nèi)容不刷新，如果關(guān)閉頁簽再通過菜單打開，重新加載。jQuery年代的解決方案就是ifream,但是在Vue.js的單頁面應(yīng)用中，都是組件化開發(fā)了，實現(xiàn)多標(biāo)簽頁解決的問題就聚焦在關(guān)于組件實例的緩存和銷毀，下邊講述兩種實現(xiàn)多標(biāo)簽頁系統(tǒng)的技術(shù)實現(xiàn)方案。

Vue Router是官方的路由管理器，跟Vue.js深度集成，確實很強(qiáng)，更多的功能不意義闡述，詳情請參考 Vue Router 官方文檔

當(dāng)我們跳轉(zhuǎn)一個新的路由時，可能是點擊菜單，也可能是點擊發(fā)生跳轉(zhuǎn)，這時候路由會發(fā)生切換，我們都希望打開一個新的頁簽，并且這個頁簽并處于激活狀態(tài)，當(dāng)打開多個時，可以切換頁簽的激活狀態(tài)，同時路由組件區(qū)域（頁面內(nèi)容）發(fā)生變化，始終展示激活頁簽對應(yīng)的內(nèi)容。

一個組件展示所有的標(biāo)簽頁，并標(biāo)識出來哪個是激活狀態(tài)，標(biāo)簽頁數(shù)據(jù)需要在菜單等地方實現(xiàn)追加，我們優(yōu)先選擇數(shù)據(jù)存在Vuex中，由標(biāo)簽頁組件實現(xiàn)切換激活標(biāo)簽和刪除標(biāo)簽，添加標(biāo)簽頁也可以在該組件內(nèi)實現(xiàn)，需要對路由進(jìn)行監(jiān)聽，路由發(fā)生調(diào)用Vuex中的增加函數(shù)，函數(shù)對路由數(shù)據(jù)進(jìn)行過濾，這樣就可以實現(xiàn)路由變化時，標(biāo)簽頁數(shù)據(jù)的變化。

在<router-view/> 外層包裹 <keep-alive>具體原理參考在動態(tài)組件上使用 keep-alive

這個時候，在你切換渲染不同路由的時候，確實好使，組件的狀態(tài)數(shù)據(jù)、表單填寫的內(nèi)容等也會被緩存，好像這么簡單都直接解決了，當(dāng)然不可能，這么簡單就沒必要寫這篇文章。

當(dāng)你更改路由參數(shù)的時候，你會發(fā)現(xiàn)參數(shù)變化的時候，不太好使了，會把之前緩存的這個組件銷毀重新加載，一個組件只能被緩存一個，我們希望的肯定是參數(shù)不一樣時，應(yīng)該分開都緩存，比如一些明細(xì)頁面，我們需要看多個客戶、多個工單，不應(yīng)該每次切換都是在重新加載。

關(guān)閉頁簽時，我們更換路由，實現(xiàn)跳轉(zhuǎn)，當(dāng)再次訪問這個路由時，組件未重新加載，這個就不符合正常的使用習(xí)慣，關(guān)閉頁簽就應(yīng)該啥都沒了，所以緩存啥的應(yīng)該都沒了。

組件有沒有緩存可以通過DevTools調(diào)試查看

這樣看起來，好像才是真的解決了所有的問題，但是還是有bug，有瑕疵， 解決方案2 中提到的一大堆過程的前提是 destroy ,只有組件進(jìn)入 destroy 才滿足 解決方案2 的方法，但是如果頁簽沒有激活，keep-alive中就已經(jīng)是停用了這個組件，關(guān)閉頁簽時，路由是沒有變化的，keep-alive對各個組件也并沒有發(fā)生啟用和停用，只是改變了Vuex中 visitedViews 的數(shù)據(jù)，所以關(guān)鍵問題是只要 visitedViews 發(fā)生變化，需要把減少的那個組件給卸載掉。

至此，卸載這個活兒終于完成了，無論是怎么關(guān)閉頁簽，都可以完成組件的卸載，切換頁簽不卸載。感覺完美無瑕，可現(xiàn)實總是那么殘酷，關(guān)閉頁簽后，再打開，切換頁簽時，這個組件 居然刷新了 ，明明關(guān)閉前，切換是不刷新的，關(guān)閉再打開后，就會刷新了，難道不會緩存了？看一下DevTools調(diào)試，懵了。。。

<keep-alive> 添加 include ，Vuex獲取當(dāng)前打開頁簽的組件名（如：visitedName），include=visitedName；針對傳參數(shù)的頁面，添加 watch ，監(jiān)聽Vuex中標(biāo)簽頁的變化，當(dāng)有變化時判斷是否包含當(dāng)前組件，沒有時卸載當(dāng)前組件，當(dāng)組件不需要傳參時可以不添加watch，include不緩存時組件將會被卸載。

注意： 頁面組件必須寫name，聲明組件名稱

以上就是關(guān)于vue單頁面和多頁面的區(qū)別相關(guān)問題的回答。希望能幫到你，如有更多相關(guān)問題，您也可以聯(lián)系我們的客服進(jìn)行咨詢，客服也會為您講解更多精彩的知識和內(nèi)容。