記 history.replaceState方法一次應(yīng)用 解決單頁面應(yīng)用刷新切換頁面問題

恩，以前就知道history api 新加了幾個(gè)方法但是沒怎么研究過，今天碰到了一個(gè)小問題，用history完美解決了，很興奮，記錄下

首先說下我遇到的問題場景：

現(xiàn)在有兩個(gè)頁面 A，B

A頁面時(shí)提交信息頁面 B頁面是結(jié)果頁

并且 A，B 頁面是同一個(gè)html文件內(nèi)用 js 模板 動(dòng)態(tài)渲染的，

那么當(dāng)結(jié)果頁面動(dòng)態(tài)渲染出來以后，每次刷新就會(huì)顯示A頁面，其實(shí)，我更想顯示B頁面對(duì)吧，肯定不想讓用戶再次提交一次，而且大多數(shù)情況下我其實(shí)并不希望用戶直接進(jìn)入提交信息頁面的，因?yàn)槿绻侵Ц兜脑?，?huì)造成二次支付，

而且在邏輯上也是有錯(cuò)誤的，我在A頁面刷新，你還應(yīng)該讓我在A頁面才對(duì)，為什么顯示B頁面？？？？

那么這個(gè)時(shí)候就是replaceState大顯身手的時(shí)候了。

                var stateObject = { result: true }; //可以傳遞參數(shù)
                var title = "Wow Title";
                var newUrl = location.href;
                history.replaceState(stateObject, '', newUrl);
                console.info('history', history);

中間的title 傳空，因?yàn)楝F(xiàn)在大多數(shù)瀏覽器都選擇忽略了它== ，
stateObject 是傳遞的參數(shù)

可以用 history.state直接獲取到

那么這樣事情就變得簡單了，在渲染B頁面的時(shí)候替換掉A頁面的連接，其實(shí)這個(gè)例子中只是傳遞了一個(gè)result參數(shù)，那么當(dāng)頁面刷新的時(shí)候只要檢測到result 這個(gè)參數(shù)為true 即直接顯示結(jié)果頁。而且當(dāng)用戶點(diǎn)擊瀏覽器回退按鈕的時(shí)候也不會(huì)再返回到A頁面，避免再次提交。

也許vue react 單頁面應(yīng)用也可以用這種方式來實(shí)現(xiàn)，先記個(gè)引子，有時(shí)間可以嘗試下。

可能這個(gè)例子比較抽象，有時(shí)間整個(gè)完整的demo

附上 history api 官網(wǎng)說明地址吧

https://developer.mozilla.org/zh-CN/docs/Web/API/History