vue 單頁應(yīng)用和多頁應(yīng)用的優(yōu)劣
多頁應(yīng)用
每一次頁面跳轉(zhuǎn)的時候，后臺服務(wù)器都會給返回一個新的html文檔，這種類型的網(wǎng)站也就是多頁網(wǎng)站，也叫做多頁應(yīng)用。
為什么多頁應(yīng)用的首屏時間快？
首屏時間叫做頁面首個屏幕的內(nèi)容展現(xiàn)的時間，當我們訪問頁面的時候，服務(wù)器返回一個html，頁面就會展示出來，這個過程只經(jīng)歷了一個HTTP請求，所以頁面展示的速度非?？?。
為什么搜索引擎優(yōu)化效果好（SEO）？
搜索引擎在做網(wǎng)頁排名的時候，要根據(jù)網(wǎng)頁內(nèi)容才能給網(wǎng)頁權(quán)重，來進行網(wǎng)頁的排名。搜索引擎是可以識別html內(nèi)容的，而我們每個頁面所有的內(nèi)容都放在Html中，所以這種多頁應(yīng)用，seo排名效果好。
但是它也有缺點，就是切換慢
因為每次跳轉(zhuǎn)都需要發(fā)出一個http請求，如果網(wǎng)絡(luò)比較慢，在頁面之間來回跳轉(zhuǎn)時，就會發(fā)現(xiàn)明顯的卡頓。
單頁應(yīng)用
第一次進入頁面的時候會請求一個html文件，刷新清除一下。切換到其他組件，此時路徑也相應(yīng)變化，但是并沒有新的html文件請求，頁面內(nèi)容也變化了。
原理是：JS會感知到url的變化，通過這一點，可以用js動態(tài)的將當前頁面的內(nèi)容清除掉，然后將下一個頁面的內(nèi)容掛載到當前頁面上，這個時候的路由不是后端來做了，而是前端來做，判斷頁面到底是顯示哪個組件，清除不需要的，顯示需要的組件。這種過程就是單頁應(yīng)用，每次跳轉(zhuǎn)的時候不需要再請求html文件了。
為什么頁面切換快？
頁面每次切換跳轉(zhuǎn)時，并不需要做html文件的請求，這樣就節(jié)約了很多http發(fā)送時延，我們在切換頁面的時候速度很快。
缺點：首屏時間慢，SEO差
單頁應(yīng)用的首屏時間慢，首屏時需要請求一次html，同時還要發(fā)送一次js請求，兩次請求回來了，首屏才會展示出來。相對于多頁應(yīng)用，首屏時間慢。
SEO效果差，因為搜索引擎只認識html里的內(nèi)容，不認識js的內(nèi)容，而單頁應(yīng)用的內(nèi)容都是靠js渲染生成出來的，搜索引擎不識別這部分內(nèi)容，也就不會給一個好的排名，會導致單頁應(yīng)用做出來的網(wǎng)頁在百度和谷歌上的排名差。
有這些缺點，為什么還要使用Vue呢？
Vue還提供了一些其它的技術(shù)來解決這些缺點，比如說服務(wù)器端渲染技術(shù)(我是SSR)，通過這些技術(shù)可以完美解決這些缺點，解決完這些問題，實際上單頁面應(yīng)用對于前端來說是非常完美的頁面開發(fā)解決方案。
新的更新
最近在改造公司的項目，公司的項目是單頁應(yīng)用，可能會改成多頁應(yīng)用，所以對這塊又重新看了一下。在網(wǎng)上看到一個表格覺得總結(jié)的很到位，貼過來。我是表格出處
| mm | 多頁應(yīng)用模式MPA | 單頁應(yīng)用模式SPA |
|---|---|---|
| 應(yīng)用構(gòu)成 | 由多個完整頁面構(gòu)成 | 一個外殼頁面和多個頁面片段構(gòu)成 |
| 跳轉(zhuǎn)方式 | 頁面之間的跳轉(zhuǎn)是從一個頁面跳轉(zhuǎn)到另一個頁面 | 頁面片段之間的跳轉(zhuǎn)是把一個頁面片段刪除或隱藏，加載另一個頁面片段并顯示出來。這是片段之間的模擬跳轉(zhuǎn)，并沒有開殼頁面 |
| 跳轉(zhuǎn)后公共資源是否重新加載 | 是 | 否 |
| URL模式 |
http://xxx/page1.html http://xxx/page1.html |
http://xxx/shell.html#page1 http://xxx/shell.html#page2 |
| 用戶體驗 | 頁面間切換加載慢，不流暢，用戶體驗差，特別是在移動設(shè)備上 | 頁面片段間的切換快，用戶體驗好，包括在移動設(shè)備上 |
| 能否實現(xiàn)轉(zhuǎn)場動畫 | 無法實現(xiàn) | 容易實現(xiàn)（手機app動效） |
| 頁面間傳遞數(shù)據(jù) | 依賴URL、cookie或者localstorage，實現(xiàn)麻煩 | 因為在一個頁面內(nèi)，頁面間傳遞數(shù)據(jù)很容易實現(xiàn) |
| 搜索引擎優(yōu)化（SEO） | 可以直接做 | 需要單獨方案做，有點麻煩 |
| 特別適用的范圍 | 需要對搜索引擎友好的網(wǎng)站 | 對體驗要求高的應(yīng)用，特別是移動應(yīng)用 |
| 搜索引擎優(yōu)化（SEO） | 可以直接做 | 需要單獨方案做，有點麻煩 |
| 開發(fā)難度 | 低一些，框架選擇容易 | 高一些，需要專門的框架來降低這種模式的開發(fā)難度 |
以上就是vue 單頁應(yīng)用和多頁應(yīng)用的優(yōu)劣的詳細內(nèi)容，更多關(guān)于vue 單頁應(yīng)用和多頁應(yīng)用的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue運行環(huán)境搭建全過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
在vue中路由使用this.$router.go(-1)返回兩次問題
這篇文章主要介紹了在vue中路由使用this.$router.go(-1)返回兩次問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12
如何通過Vue自帶服務(wù)器實現(xiàn)Ajax請求跨域(vue-cli)
從A頁面訪問到B頁面,并且要獲取到B頁面上的數(shù)據(jù),而兩個頁面所在的端口、協(xié)議和域名中哪怕有一個不對等,那么這種行為就叫跨域,這篇文章給大家介紹如何通過Vue自帶服務(wù)器實現(xiàn)Ajax請求跨域(vue-cli),感興趣的朋友一起看看吧2023-10-10
使用 Vue-TCB 快速在 Vue 應(yīng)用中接入云開發(fā)的方法
這篇文章主要介紹了如何使用 Vue-TCB 快速在 Vue 應(yīng)用中接入云開發(fā),本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
為了實現(xiàn)全屏滾動效果,我們首先需要使用Vue.js框架搭建項目,這篇文章主要給大家介紹了關(guān)于VUE屏幕整體滾動(滑動或滾輪)原生方法的相關(guān)資料,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了如何使用vue自定義指令構(gòu)建拖放插件，幫助大家更好的理解和學習使用vue，感興趣的朋友可以了解下2021-04-04
這篇文章主要為大家詳細介紹了Vue實現(xiàn)回到頂部和底部動畫效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
vue3通過render函數(shù)實現(xiàn)菜單下拉框的示例
本文主要介紹了vue3通過render函數(shù)實現(xiàn)菜單下拉框的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
vue2使用wangeditor實現(xiàn)手寫輸入功能
這篇文章主要為大家詳細介紹了vue2如何使用wangeditor實現(xiàn)手寫輸入功能,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以了解下2023-12-12
本文介紹關(guān)于Vue.js項目中時間選擇器組件的問題,當選擇后清空導致值變?yōu)閚ull,進而引發(fā)后臺接口報錯,通過監(jiān)聽`overallForm.time`的值并設(shè)置為空數(shù)組,成功解決此問題,確保了數(shù)據(jù)正確性,同時,建議避免直接監(jiān)聽整個對象以優(yōu)化性能,感興趣的朋友一起看看吧2024-08-08