溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
恩，以前就知道history api 新加了幾個方法但是沒怎么研究過，今天碰到了一個小問題，用history完美解決了，很興奮，記錄下
首先說下我遇到的問題場景：
現在有兩個頁面 A，B
A頁面時提交信息頁面 B頁面是結果頁
并且 A，B 頁面是同一個html文件內用 js 模板 動態渲染的，
那么當結果頁面動態渲染出來以后，每次刷新就會顯示A頁面，其實，我更想顯示B頁面對吧，肯定不想讓用戶再次提交一次，而且大多數情況下我其實并不希望用戶直接進入提交信息頁面的，因為如果是支付的話，會造成二次支付，
而且在邏輯上也是有錯誤的，我在A頁面刷新，你還應該讓我在A頁面才對，為什么顯示B頁面？？？？
那么這個時候就是replaceState大顯身手的時候了。
var stateObject = { result: true }; //可以傳遞參數
var title = "Wow Title";
var newUrl = location.href;
history.replaceState(stateObject, '', newUrl);
console.info('history', history);中間的title 傳空，因為現在大多數瀏覽器都選擇忽略了它== ，
stateObject 是傳遞的參數
可以用 history.state直接獲取到
那么這樣事情就變得簡單了，在渲染B頁面的時候替換掉A頁面的連接，其實這個例子中只是傳遞了一個result參數，那么當頁面刷新的時候只要檢測到result 這個參數為true 即直接顯示結果頁。而且當用戶點擊瀏覽器回退按鈕的時候也不會再返回到A頁面，避免再次提交。
也許vue react 單頁面應用也可以用這種方式來實現，先記個引子，有時間可以嘗試下。
可能這個例子比較抽象，有時間整個完整的demo
附上 history api 官網說明地址吧
https://developer.mozilla.org/zh-CN/docs/Web/API/History
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
