目錄

1、單頁面應用跳轉
2、多頁面應用跳轉
3、錨點跳轉
4、iframe跳轉
5、網(wǎng)頁的前進和后退
6、重定向

單頁面應用跳轉

什么是單頁面應用？

單頁面應用是由一個外殼html頁面和多個頁面片段組成的。（注：下文說的組件就是頁面片段）

它根據(jù)當前路由來選擇展示哪個組件，看下圖，header和footer是外殼html的公共部分，中間的組件是動態(tài)變化的部分。

比如當前路由是/page-one，那就展示pageone組件，隱藏其他組件。如果路由是/page-two，就展示pagetwo組件，把所有其他組件隱藏。

可以說我們現(xiàn)在見到的很多小型pc端網(wǎng)站和移動端h5都是單頁面應用。

單頁面的優(yōu)點是當切換頁面時，它是局部刷新的，不用再去請求一次公共的js、css等靜態(tài)資源。而且單頁面應用的體驗比較好，切換頁面順暢，單頁面可以使用各種酷炫的換場動畫，我們常見的兔展、易企秀h5就是很好的例子。

現(xiàn)在我們回到重點，單頁面應用內，不同的頁面之間跳轉其實是通過隱藏和顯示頁面片段來實現(xiàn)的，因為在同一個html頁面，所以他們之間傳遞數(shù)據(jù)也比較簡單方便，可通過URL參數(shù)、公共數(shù)據(jù)變量等方式。

多頁面應用跳轉

多頁面應用是由多個完整的頁面構成的。看下圖：

每個頁面都是一個完整的html。它的頁面跳轉方式是從一個html頁面跳轉到另一個html頁面，這種方式頁面切換慢，因為每次都要重新加載公共資源（js、css）。

一般通過URL參數(shù)（最常用）、本地緩存localstorage（麻煩一些）等方式實現(xiàn)數(shù)據(jù)傳遞。

多頁面應用比較適用于大型復雜的應用或者是需要SEO友好的網(wǎng)站。

如果從page-one跳轉到page-two（通過新打開一個標簽頁的方式），那page-one和page-two之間還能通信嗎？舉個例子：

#一個授權和展示授權列表的功能#
在page-one頁面點擊授權，然后新打開一個tab標簽頁面跳轉到page-two，在page-two頁面完成授權完整流程操作，當page-two操作完成后，需要通知page-one頁面去拉取最新的授權列表。

答案是可以的。js提供了一個postMessage的方法可以給另一個tab標簽頁面發(fā)送消息。所以上面例子是可以通過這個方法去push消息通知的。（當然這里說的只是其中一種解決方案）

錨點跳轉

錨點跳轉可以說也是單頁面跳轉。但是它不一樣的地方是，它是通過URL的#號后面的id來動態(tài)滾動頁面跳轉到相應的位置。

一般用于快速導航。常見于電商網(wǎng)頁的品類便捷導航

iframe跳轉

什么是iframe？

官方的解釋是：iframe是HTML內聯(lián)框架元素，它能夠將另一個HTML頁面嵌入到當前頁面中。

它的使用場景是：當你想在當前網(wǎng)頁，內嵌一個第三方網(wǎng)站時，可以考慮使用iframe的方式。

需要注意的是，不是所有的第三方網(wǎng)站都能內嵌，如果第三方網(wǎng)站是需要登錄校驗的，就需要第三方網(wǎng)站支持登錄api的調用等通信。這樣才能使得當前網(wǎng)站和第三方網(wǎng)站無縫銜接起來。

當前網(wǎng)頁和iframe之間還可以通信互相傳遞信息。

網(wǎng)頁的前進和后退

瀏覽器對每個不同的訪問路由，一般會登記一個瀏覽記錄（replace方法除外，看下面）。

瀏覽器的前進和后退功能，可以在代碼里面去觸發(fā)。需要注意的是，如果你使用的是replace方法去跳轉到新頁面，新頁面就會替換之前的頁面，并且不會留下瀏覽記錄。當你再調用網(wǎng)頁后退方法時，就回不去前一個頁面了。

舉個例子，假設你的瀏覽記錄是這樣的：a->b->c。當b頁面跳轉c頁面時，使用了replace，則c頁面會替換掉b頁面，當你再返回上一頁時，就回到了a頁面。

replace的使用場景是，當網(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這個新域名，那就可以在服務端配置一個域名的永久重定向，a.com重定向到b.com。

達到的效果是，當你輸入a.com域名時，自動跳轉到b.com域名。

2、302重定向

指的是臨時性重定向。

舉個例子，在統(tǒng)一登錄功能中，當你在應用a點擊登錄，后臺做統(tǒng)一校驗后，根據(jù)應用的appId，來決定重定向到哪個應用首頁。如果是在應用a點擊的登錄，則重定向到應用a的首頁。