去他的history.go(-N)和pushState popstate，改用replaceState完美解決

都是傳回上一頁鬧得，打球都心不在焉了。

除了首頁，其他的頁面左上角都有一個傳回上一頁的按鈕。這樣的功能合情合理。一個window.history.go(-1)就能搞定的玩意兒。

新需求來了，如下：

需求一：

A頁：清單頁（不同的業務，不同的清單頁）

B頁：詳細頁（同一個詳細頁）

C頁：表單頁（同一個表單頁）

A—>B—>C(送出成功)—>B(點選傳回上一頁)—>A

需求二：

用戶端（浏覽器、微信、APP）的回退按鈕也需要同樣的功能

解決方案（自以為是）：

window.history.go(-3)：本來欣喜，這麼簡單就搞定了，實踐證明這是個錯誤

（1）頁面見的跳轉是通過A标簽href或者window.location.href，這會在曆史記錄history中增加一條曆史條目，A—>B—>C—>B—>A，go(-3)可以滿足需求一。

（2）使用history.pushState()函數，popstate事件配合，事件處理程式中調用需求一的函數，想當然就這麼覺得完成了。

（3）自測一下，全亂了都是哪裡到哪裡，迷路了，再也回不去了。

（4）就鑽了-1…-N的牛角尖無法自拔了，埋頭揉了一頓頭發，發型已亂，現在是晚上10點，喊個滴滴回家。

（5）周末熄燈睡不着了，問問老伴兒有沒有好的想法，還真有，由于此功能放到了公用子產品了，pushState會在history中增加一條曆史條目，導緻不需要這個傳回邏輯的頁面，在go(-1)時出現了混亂。一個後端從邏輯給個行的同的建議還是，晚安好夢。

（6）周一，到了機關，迫不及待試一下，淩亂了。popstate想要觸發，想這種情景下使用history.pushState()是最合适的，可是它會增加記錄，隻能這樣亂着，雖然我屬于總在放棄治療邊緣不斷試探的人，可總歸是試探，絕不玩真格兒的。電腦給面子，此時藍屏了，哈哈哈哈，我已瘋。

解決方案（靠譜點的）：

-1…-N是控制不了了，MDN上的pushState、replaceState、popstate，看了N遍，榆木腦殼，沒開竅，網上也有對比pushState、replaceState差別的，一個增加一條曆史條目，一個把目前的替換掉，不增加。現在的情況就是增加一條導緻的，如果沒有pushState作妖兒，不就可以了嗎，用replaceState試試吧。

（1）A—>B：replaceState(‘replaceurl’,null,‘B頁面位址’);

（2）B—>C：replaceState(‘replaceurl’,null,‘C頁面位址’);

（3）C—>B：replaceState(‘replaceurl’,null,‘B頁面位址’);

這時候無論點選B頁左上角的傳回上一頁，還是用戶端的回退按鈕，老老實實回到了來時的A清單頁，這個由于replaceState指将目前曆史條目進行替換，不會增加新曆史條目。隻在頁面左上角傳回按鈕加事件處理程式go(-1)即可，用戶端的回退按鈕不用理。

當然也可以使用window.href.replace()實作。

混沌了三天，終于塵埃落定。萬物必有其存在的道理，html5給出replaceState就是幹這個的。

檢討：

1：pushState、replaceState、popstate相關原理了解不透徹，誤用亂用。

2：對需求隻盯表象，不究本質。

如果有好建議，歡迎聊聊！！