需求
當我們從商品列表界面點擊商品進入商品編輯界面後，我們點擊保存按鈕，再跳轉回商品列表界面。但此時會有一個問題，在商品列表界面返回上一界面，會返回到商品編輯界面。而我們希望它能返回到它真正的上一級，也就是我如果在主頁點擊該界面，編輯商品完成後，我應該返回主界面。
模擬
定義三個界面，home.html表示主界面，index.html表示商品列表界面，index1.html表示商品編輯界面，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>主頁</title>
</head>
<body>
<h1>主頁</h1>
<a href="./index.html">商品列表</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>商品列表</title>
<script>
function replaceDoc(){
window.location.replace("./index1.html")
}
</script>
</head>
<body>
<h1>商品列表界面</h1>
<input type="button" value="編輯" onclick="replaceDoc()">
<a href="./index1.html">編輯</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script>
// function replaceDoc(){
// window.location.replace("./index.html")
// }
function replaceDoc(){
history.go(-1)
}
</script>
<body>
<h1>商品編輯界面</h1>
<a href="./index.html">完成</a>
<br>
<input type="button" value="完成replace版" onclick="replaceDoc()">
</body>
</html>
問題引出
初始時，我是使用在商品編輯界面採用repalce()方法，將編輯界面直接重置爲商品列表界面，但是發現我點擊返回時，回到的依舊是商品列表界面。
問題分析
replace()方法是用參數中的url來替換本界面，於是在調用棧中，將當前界面置換爲了新界面。因爲我在控制檯中使用window.history.length發現調用棧的長度未發生變化，也就是說，此時並沒有產生新的跳轉，而是在請求棧中將本棧中的url值直接替換爲了參數中的url值。
所以我們在當前這個編輯界面，此時它replace爲另一個界面，它的前一個還是商品列表界面，所以就造成了我們點擊返回，又加載了一遍列表界面，因爲此時棧中有兩個這個列表界面，返回後就又回到了該界面。
所以我這邊採用history.go(-1)，將界面返回到棧的前一個，那麼在此界面就可以正確地返回它的前一個了。
結論
replace是將界面置換爲新的界面，在調用棧中是將此棧中界面置換，而history.go()是加載到歷史界面中的某一個具體界面。