关于window.location.replace()以及history.go()方法

本文探讨了在商品编辑场景下，如何避免用户点击返回按钮回到商品编辑界面的问题。通过分析window.location.replace()方法和history.go()方法的工作原理，得出结论：replace方法会直接替换当前页面，导致历史记录不变，而history.go(-1)可以返回历史记录中的前一个页面，从而解决返回逻辑错误的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

当我们从商品列表界面点击商品进入商品编辑界面后，我们点击保存按钮，再跳转回商品列表界面。但此时会有一个问题，在商品列表界面返回上一界面，会返回到商品编辑界面。而我们希望它能返回到它真正的上一级，也就是我如果在主页点击该界面，编辑商品完成后，我应该返回主界面。

模拟

定义三个界面，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)，将界面返回到栈的前一个，那么在此界面就可以正确地返回它的前一个了。