image.png
image.png
什么是多頁面應(yīng)用？看這兩個(gè)圖片，每一次頁面跳轉(zhuǎn)的時(shí)候，后臺(tái)的服務(wù)器都會(huì)給我們返回一個(gè)新的HTML文檔，這種類型的網(wǎng)站就是多頁面網(wǎng)站，或者稱之為多頁面應(yīng)用。
image.png
當(dāng)我們使用多頁面應(yīng)用的時(shí)候，每一次頁面的跳轉(zhuǎn)，后端都會(huì)返回一個(gè)新的HTML文件。
這就帶來了一些優(yōu)點(diǎn)：1、頁面首個(gè)屏幕展示所需的時(shí)間很短：當(dāng)訪問一個(gè)頁面的時(shí)候，服務(wù)器返回一個(gè)HTML文件，然后頁面就會(huì)被展示出來，這個(gè)只經(jīng)歷了一個(gè)HTTP請(qǐng)求的過程，所以頁面展示的速度會(huì)很快，請(qǐng)求回來，頁面也就展示出來了；2、搜索引擎優(yōu)化（SEO）效果非常好：搜索引擎進(jìn)行排名的時(shí)候，是看網(wǎng)頁的內(nèi)容的，搜索引擎是可以識(shí)別HTML中的內(nèi)容，我們每個(gè)頁面的內(nèi)容都是放在HTML中，這樣的話，內(nèi)容都可以被搜索引擎來使用，排名的效果就非常好了。
多頁應(yīng)用也有缺點(diǎn)：頁面切換慢。因?yàn)槊恳淮翁D(zhuǎn)頁面的時(shí)候，都需要發(fā)一個(gè)HTTP請(qǐng)求。這樣，當(dāng)網(wǎng)速比較慢的時(shí)候，當(dāng)我們在不同頁面切換的時(shí)候，就能感覺到明顯的卡頓。
單頁面應(yīng)用
圖片.png
這是首頁的代碼，顯示如下：
圖片.png
現(xiàn)在希望在首頁這個(gè)代碼中做一個(gè)調(diào)整，讓其可以跳轉(zhuǎn)到list頁面，做頁面跳轉(zhuǎn)的時(shí)候，一般不用a標(biāo)簽跳轉(zhuǎn)，用router-link標(biāo)簽來進(jìn)行跳轉(zhuǎn)，和a標(biāo)簽使用類似，標(biāo)簽內(nèi)寫的是在頁面中顯示的字，標(biāo)簽中的to屬性類比于標(biāo)簽a中的href屬性：
圖片.png
因?yàn)閠emplate標(biāo)簽內(nèi)與之暴露的只能是一個(gè)標(biāo)簽，所以添加了一對(duì)div標(biāo)簽。
我們使用vue寫的是單頁應(yīng)用。當(dāng)我們第一次進(jìn)入頁面的時(shí)候，會(huì)請(qǐng)求一個(gè)HTML文件：
圖片.png
當(dāng)我進(jìn)入列表頁的時(shí)候，并沒有再請(qǐng)求一個(gè)HTML文件；當(dāng)再回到首頁的時(shí)候，依然不會(huì)請(qǐng)求HTML文件。這是怎么做到不請(qǐng)求HTML文件，頁面會(huì)跟著變化呢？
是因?yàn)镴S會(huì)感知到URL的變化。用js動(dòng)態(tài)地把當(dāng)前頁面的內(nèi)容清除掉，再把下一個(gè)頁面的內(nèi)容掛載到頁面上，這時(shí)這個(gè)路由是由前端來做，這個(gè)過程就不用每次頁面跳轉(zhuǎn)都請(qǐng)求HTML文件了
單頁應(yīng)用的優(yōu)缺點(diǎn)：
圖片.png
1、當(dāng)使用單頁應(yīng)用來進(jìn)行頁面跳轉(zhuǎn)的時(shí)候，頁面的每次跳轉(zhuǎn)并不是加載HTML文件，而是通過JS動(dòng)態(tài)地把當(dāng)前頁面的內(nèi)容給刪除掉，再去把新頁面上的DOM結(jié)構(gòu)給渲染出來。這樣就帶來了頁面切換的時(shí)候，速度很快；但是也會(huì)有些缺點(diǎn)：首屏?xí)r間稍慢。因?yàn)閱雾搼?yīng)用，首屏展示出來，需要去請(qǐng)求一次HTML，同時(shí)還需要發(fā)一次JS的請(qǐng)求，兩個(gè)請(qǐng)求都回來了，首屏才會(huì)展示出來。
2、SEO（搜索引擎優(yōu)化效果）差
搜索引擎只認(rèn)識(shí)HTML中的內(nèi)容，不認(rèn)識(shí)JS中的內(nèi)容，單頁應(yīng)用所有的頁面內(nèi)容都是靠JS渲染形成的，所以搜索引擎識(shí)別不了這塊的內(nèi)容，也就不會(huì)給一個(gè)好的排名。
vue中還有其他技術(shù)，通過這些技術(shù)可以避開單頁應(yīng)用的缺點(diǎn)。使單頁應(yīng)用成為一個(gè)不錯(cuò)的應(yīng)用
