產(chǎn)品需要了解的幾種網(wǎng)頁跳轉(zhuǎn)方式
目錄
1、單頁面應(yīng)用跳轉(zhuǎn)
2、多頁面應(yīng)用跳轉(zhuǎn)
3、錨點跳轉(zhuǎn)
4、iframe跳轉(zhuǎn)
5、網(wǎng)頁的前進(jìn)和后退
6、重定向
單頁面應(yīng)用跳轉(zhuǎn)
什么是單頁面應(yīng)用？
單頁面應(yīng)用是由一個外殼html頁面和多個頁面片段組成的。（注：下文說的組件就是頁面片段）
它根據(jù)當(dāng)前路由來選擇展示哪個組件，看下圖，header和footer是外殼html的公共部分，中間的組件是動態(tài)變化的部分。
比如當(dāng)前路由是/page-one，那就展示pageone組件，隱藏其他組件。如果路由是/page-two，就展示pagetwo組件，把所有其他組件隱藏。
可以說我們現(xiàn)在見到的很多小型pc端網(wǎng)站和移動端h5都是單頁面應(yīng)用。
單頁面的優(yōu)點是當(dāng)切換頁面時，它是局部刷新的，不用再去請求一次公共的js、css等靜態(tài)資源。而且單頁面應(yīng)用的體驗比較好，切換頁面順暢，單頁面可以使用各種酷炫的換場動畫，我們常見的兔展、易企秀h5就是很好的例子。
現(xiàn)在我們回到重點，單頁面應(yīng)用內(nèi)，不同的頁面之間跳轉(zhuǎn)其實是通過隱藏和顯示頁面片段來實現(xiàn)的，因為在同一個html頁面，所以他們之間傳遞數(shù)據(jù)也比較簡單方便，可通過URL參數(shù)、公共數(shù)據(jù)變量等方式。
多頁面應(yīng)用跳轉(zhuǎn)
多頁面應(yīng)用是由多個完整的頁面構(gòu)成的。看下圖：
每個頁面都是一個完整的html。它的頁面跳轉(zhuǎn)方式是從一個html頁面跳轉(zhuǎn)到另一個html頁面，這種方式頁面切換慢，因為每次都要重新加載公共資源（js、css）。
一般通過URL參數(shù)（最常用）、本地緩存localstorage（麻煩一些）等方式實現(xiàn)數(shù)據(jù)傳遞。
多頁面應(yīng)用比較適用于大型復(fù)雜的應(yīng)用或者是需要SEO友好的網(wǎng)站。
如果從page-one跳轉(zhuǎn)到page-two（通過新打開一個標(biāo)簽頁的方式），那page-one和page-two之間還能通信嗎？舉個例子：
#一個授權(quán)和展示授權(quán)列表的功能#
在page-one頁面點擊授權(quán)，然后新打開一個tab標(biāo)簽頁面跳轉(zhuǎn)到page-two，在page-two頁面完成授權(quán)完整流程操作，當(dāng)page-two操作完成后，需要通知page-one頁面去拉取最新的授權(quán)列表。
答案是可以的。js提供了一個postMessage的方法可以給另一個tab標(biāo)簽頁面發(fā)送消息。所以上面例子是可以通過這個方法去push消息通知的。（當(dāng)然這里說的只是其中一種解決方案）
錨點跳轉(zhuǎn)
錨點跳轉(zhuǎn)可以說也是單頁面跳轉(zhuǎn)。但是它不一樣的地方是，它是通過URL的#號后面的id來動態(tài)滾動頁面跳轉(zhuǎn)到相應(yīng)的位置。
一般用于快速導(dǎo)航。常見于電商網(wǎng)頁的品類便捷導(dǎo)航
iframe跳轉(zhuǎn)
什么是iframe？
官方的解釋是：iframe是HTML內(nèi)聯(lián)框架元素，它能夠?qū)⒘硪粋€HTML頁面嵌入到當(dāng)前頁面中。
它的使用場景是：當(dāng)你想在當(dāng)前網(wǎng)頁，內(nèi)嵌一個第三方網(wǎng)站時，可以考慮使用iframe的方式。
需要注意的是，不是所有的第三方網(wǎng)站都能內(nèi)嵌，如果第三方網(wǎng)站是需要登錄校驗的，就需要第三方網(wǎng)站支持登錄api的調(diào)用等通信。這樣才能使得當(dāng)前網(wǎng)站和第三方網(wǎng)站無縫銜接起來。
當(dāng)前網(wǎng)頁和iframe之間還可以通信互相傳遞信息。
網(wǎng)頁的前進(jìn)和后退
瀏覽器對每個不同的訪問路由，一般會登記一個瀏覽記錄（replace方法除外，看下面）。
瀏覽器的前進(jìn)和后退功能，可以在代碼里面去觸發(fā)。需要注意的是，如果你使用的是replace方法去跳轉(zhuǎn)到新頁面，新頁面就會替換之前的頁面，并且不會留下瀏覽記錄。當(dāng)你再調(diào)用網(wǎng)頁后退方法時，就回不去前一個頁面了。
舉個例子，假設(shè)你的瀏覽記錄是這樣的：a->b->c。當(dāng)b頁面跳轉(zhuǎn)c頁面時，使用了replace，則c頁面會替換掉b頁面，當(dāng)你再返回上一頁時，就回到了a頁面。
replace的使用場景是，當(dāng)網(wǎng)頁后退時，不想讓用戶再回到上一個頁面。比如一些只能使用一次的臨時頁面。
重定向
重定向一般指的是301重定向和302重定向。均是由后臺發(fā)起的。
1、301重定向
指的是永久性重定向。
舉個例子，以前你的網(wǎng)站域名是http://www.a.com，但由于某種原因需要切換域名，需要用http://www.b.com來代替，
但是線上已經(jīng)有很多人正在適用a.com這個域名，而且可能已經(jīng)保存在瀏覽器書簽。為了兼容老域名，又想要培養(yǎng)用戶慢慢使用b.com這個新域名，那就可以在服務(wù)端配置一個域名的永久重定向，a.com重定向到b.com。
達(dá)到的效果是，當(dāng)你輸入a.com域名時，自動跳轉(zhuǎn)到b.com域名。
2、302重定向
指的是臨時性重定向。
舉個例子，在統(tǒng)一登錄功能中，當(dāng)你在應(yīng)用a點擊登錄，后臺做統(tǒng)一校驗后，根據(jù)應(yīng)用的appId，來決定重定向到哪個應(yīng)用首頁。如果是在應(yīng)用a點擊的登錄，則重定向到應(yīng)用a的首頁。
--- END ---
--- 推薦閱讀 ---
當(dāng)我們?yōu)g覽網(wǎng)頁時，隱私是如何被竊取的？