vue 單頁應(yīng)用和多頁應(yīng)用的優(yōu)劣
多頁應(yīng)用
每一次頁面跳轉(zhuǎn)的時(shí)候，后臺(tái)服務(wù)器都會(huì)給返回一個(gè)新的html文檔，這種類型的網(wǎng)站也就是多頁網(wǎng)站，也叫做多頁應(yīng)用。
為什么多頁應(yīng)用的首屏?xí)r間快？
首屏?xí)r間叫做頁面首個(gè)屏幕的內(nèi)容展現(xiàn)的時(shí)間，當(dāng)我們?cè)L問頁面的時(shí)候，服務(wù)器返回一個(gè)html，頁面就會(huì)展示出來，這個(gè)過程只經(jīng)歷了一個(gè)HTTP請(qǐng)求，所以頁面展示的速度非常快。
為什么搜索引擎優(yōu)化效果好（SEO）？
搜索引擎在做網(wǎng)頁排名的時(shí)候，要根據(jù)網(wǎng)頁內(nèi)容才能給網(wǎng)頁權(quán)重，來進(jìn)行網(wǎng)頁的排名。搜索引擎是可以識(shí)別html內(nèi)容的，而我們每個(gè)頁面所有的內(nèi)容都放在Html中，所以這種多頁應(yīng)用，seo排名效果好。
但是它也有缺點(diǎn)，就是切換慢
因?yàn)槊看翁D(zhuǎn)都需要發(fā)出一個(gè)http請(qǐng)求，如果網(wǎng)絡(luò)比較慢，在頁面之間來回跳轉(zhuǎn)時(shí)，就會(huì)發(fā)現(xiàn)明顯的卡頓。
單頁應(yīng)用
第一次進(jìn)入頁面的時(shí)候會(huì)請(qǐng)求一個(gè)html文件，刷新清除一下。切換到其他組件，此時(shí)路徑也相應(yīng)變化，但是并沒有新的html文件請(qǐng)求，頁面內(nèi)容也變化了。
原理是：JS會(huì)感知到url的變化，通過這一點(diǎn)，可以用js動(dòng)態(tài)的將當(dāng)前頁面的內(nèi)容清除掉，然后將下一個(gè)頁面的內(nèi)容掛載到當(dāng)前頁面上，這個(gè)時(shí)候的路由不是后端來做了，而是前端來做，判斷頁面到底是顯示哪個(gè)組件，清除不需要的，顯示需要的組件。這種過程就是單頁應(yīng)用，每次跳轉(zhuǎn)的時(shí)候不需要再請(qǐng)求html文件了。
為什么頁面切換快？
頁面每次切換跳轉(zhuǎn)時(shí)，并不需要做html文件的請(qǐng)求，這樣就節(jié)約了很多http發(fā)送時(shí)延，我們?cè)谇袚Q頁面的時(shí)候速度很快。
缺點(diǎn)：首屏?xí)r間慢，SEO差
單頁應(yīng)用的首屏?xí)r間慢，首屏?xí)r需要請(qǐng)求一次html，同時(shí)還要發(fā)送一次js請(qǐng)求，兩次請(qǐng)求回來了，首屏才會(huì)展示出來。相對(duì)于多頁應(yīng)用，首屏?xí)r間慢。
SEO效果差，因?yàn)樗阉饕嬷徽J(rèn)識(shí)html里的內(nèi)容，不認(rèn)識(shí)js的內(nèi)容，而單頁應(yīng)用的內(nèi)容都是靠js渲染生成出來的，搜索引擎不識(shí)別這部分內(nèi)容，也就不會(huì)給一個(gè)好的排名，會(huì)導(dǎo)致單頁應(yīng)用做出來的網(wǎng)頁在百度和谷歌上的排名差。
有這些缺點(diǎn)，為什么還要使用Vue呢？
Vue還提供了一些其它的技術(shù)來解決這些缺點(diǎn)，比如說服務(wù)器端渲染技術(shù)(我是SSR)，通過這些技術(shù)可以完美解決這些缺點(diǎn)，解決完這些問題，實(shí)際上單頁面應(yīng)用對(duì)于前端來說是非常完美的頁面開發(fā)解決方案。
新的更新
最近在改造公司的項(xiàng)目，公司的項(xiàng)目是單頁應(yīng)用，可能會(huì)改成多頁應(yīng)用，所以對(duì)這塊又重新看了一下。在網(wǎng)上看到一個(gè)表格覺得總結(jié)的很到位，貼過來。我是表格出處
| mm | 多頁應(yīng)用模式MPA | 單頁應(yīng)用模式SPA |
|---|---|---|
| 應(yīng)用構(gòu)成 | 由多個(gè)完整頁面構(gòu)成 | 一個(gè)外殼頁面和多個(gè)頁面片段構(gòu)成 |
| 跳轉(zhuǎn)方式 | 頁面之間的跳轉(zhuǎn)是從一個(gè)頁面跳轉(zhuǎn)到另一個(gè)頁面 | 頁面片段之間的跳轉(zhuǎn)是把一個(gè)頁面片段刪除或隱藏，加載另一個(gè)頁面片段并顯示出來。這是片段之間的模擬跳轉(zhuǎn)，并沒有開殼頁面 |
| 跳轉(zhuǎn)后公共資源是否重新加載 | 是 | 否 |
| URL模式 |
http://xxx/page1.html http://xxx/page1.html |
http://xxx/shell.html#page1 http://xxx/shell.html#page2 |
| 用戶體驗(yàn) | 頁面間切換加載慢，不流暢，用戶體驗(yàn)差，特別是在移動(dòng)設(shè)備上 | 頁面片段間的切換快，用戶體驗(yàn)好，包括在移動(dòng)設(shè)備上 |
| 能否實(shí)現(xiàn)轉(zhuǎn)場動(dòng)畫 | 無法實(shí)現(xiàn) | 容易實(shí)現(xiàn)（手機(jī)app動(dòng)效） |
| 頁面間傳遞數(shù)據(jù) | 依賴URL、cookie或者localstorage，實(shí)現(xiàn)麻煩 | 因?yàn)樵谝粋€(gè)頁面內(nèi)，頁面間傳遞數(shù)據(jù)很容易實(shí)現(xiàn) |
| 搜索引擎優(yōu)化（SEO） | 可以直接做 | 需要單獨(dú)方案做，有點(diǎn)麻煩 |
| 特別適用的范圍 | 需要對(duì)搜索引擎友好的網(wǎng)站 | 對(duì)體驗(yàn)要求高的應(yīng)用，特別是移動(dòng)應(yīng)用 |
| 搜索引擎優(yōu)化（SEO） | 可以直接做 | 需要單獨(dú)方案做，有點(diǎn)麻煩 |
| 開發(fā)難度 | 低一些，框架選擇容易 | 高一些，需要專門的框架來降低這種模式的開發(fā)難度 |
以上就是vue 單頁應(yīng)用和多頁應(yīng)用的優(yōu)劣的詳細(xì)內(nèi)容，更多關(guān)于vue 單頁應(yīng)用和多頁應(yīng)用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
- vue-cli單頁應(yīng)用改成多頁應(yīng)用配置詳解
- webpack4.0+vue2.0利用批處理生成前端單頁或多頁應(yīng)用的方法
- 詳解vue-cli3多頁應(yīng)用改造
- Vue CLI3基礎(chǔ)學(xué)習(xí)之pages構(gòu)建多頁應(yīng)用
- 詳解Vue CLI3 多頁應(yīng)用實(shí)踐和源碼設(shè)計(jì)
- 手把手教你vue-cli單頁到多頁應(yīng)用的方法
- Vue單頁及多頁應(yīng)用全局配置404頁面實(shí)踐記錄
- 詳解如何使用 vue-cli 開發(fā)多頁應(yīng)用
- vue 如何從單頁應(yīng)用改造成多頁應(yīng)用
相關(guān)文章
Vue3中的h方法用于創(chuàng)建虛擬DOM節(jié)點(diǎn),是渲染函數(shù)的核心,它接受三個(gè)參數(shù)：type（節(jié)點(diǎn)類型）、props（屬性對(duì)象）和children（子節(jié)點(diǎn)）,通過示例展示了如何使用h方法創(chuàng)建簡單的HTML元素、帶有屬性的元素、嵌套元素和自定義組件,感興趣的朋友一起看看吧2025-03-03
vue-print-nb實(shí)現(xiàn)頁面打印功能實(shí)例(含分頁打印)
在項(xiàng)目中,有時(shí)需要打印頁面的表格,在網(wǎng)上找了一個(gè)打印組件vue-print-nb,用了還不錯(cuò),所以下面這篇文章主要給大家介紹了關(guān)于vue-print-nb實(shí)現(xiàn)頁面打印功能的相關(guān)資料,需要的朋友可以參考下2022-08-08
這篇文章主要為大家介紹了Vue中使用防抖與節(jié)流的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要介紹了Vue.js directive自定義指令詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-09-09
本篇文章主要介紹了Vue.js -- 過濾器使用總結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了VueJS頁面渲染之后如何調(diào)用函數(shù)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了Vue input輸入框中的值如何變成黑點(diǎn)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue init webpack myproject構(gòu)建項(xiàng)目 ip不能訪問的解決方法
下面小編就為大家分享一篇vue init webpack myproject構(gòu)建項(xiàng)目 ip不能訪問的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue?require.context()的用法實(shí)例詳解
require.context是webpack提供的一個(gè)api,通常用于批量注冊(cè)組件,下面這篇文章主要給大家介紹了關(guān)于vue?require.context()用法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
這篇文章主要介紹了關(guān)于Vue中的watch監(jiān)視屬性,Vue中的watch默認(rèn)不監(jiān)視對(duì)象內(nèi)部值的改變,當(dāng)被監(jiān)視的屬性變化時(shí)，回調(diào)函數(shù)自動(dòng)調(diào)用，進(jìn)行相關(guān)操作,需要的朋友可以參考下2023-04-04