在 JavaScript 中实现返回上一页的功能可以通过多种方式实现，每种方法都有其特定的使用场景和底层原理。以下是常用的几种方法：
1. 使用 history.back()
使用场景
常规导航：当用户需要返回到前一个页面时。
表单提交后返回：用户提交表单后，如果需要返回到表单页面进行修改或其他操作。
示例代码
function goBack() {
history.back();
}
底层原理
history.back() 是 window.history 对象的一个方法，用于返回到浏览器历史记录中的前一个条目。当调用 history.back() 时，浏览器会尝试回到上一个页面。
2. 使用 window.history.go(-1)
使用场景
与 history.back() 相同：适用于需要返回上一页的场景。
示例代码
function goBack() {
window.history.go(-1);
}
底层原理
window.history.go() 方法可以接受一个整数参数，表示相对于当前位置的历史记录条目的偏移量。-1 表示返回到前一个页面。
3. 使用 location.href 或 location.assign()
使用场景
明确指定 URL：当需要返回到某个特定的 URL 而不是历史记录中的前一条目时。
刷新当前页面：有时返回上一页实际上是重新加载当前页面。
示例代码
function goBack() {
let previousPage = sessionStorage.getItem(‘previousPage’) || document.referrer;
if (previousPage) {
location.href = previousPage; // 或者使用 location.assign(previousPage);
} else {
history.back();
}
}
底层原理
location.href 属性可以获取或设置当前窗口的位置，当设置 location.href 时，浏览器会导航到指定的 URL。location.assign() 方法的作用与设置 location.href 相同，都是导航到指定的 URL。
4. 使用 window.location.replace()
使用场景
替换当前历史记录条目：当需要返回到上一个页面，并且不希望在历史记录中保留返回动作时。
防止用户点击后退按钮返回到当前页面：在某些情况下，可能需要防止用户通过点击后退按钮返回到当前页面。
示例代码
function goBack() {
let previousPage = sessionStorage.getItem(‘previousPage’) || document.referrer;
if (previousPage) {
window.location.replace(previousPage);
} else {
history.back();
}
}
底层原理
window.location.replace() 方法可以替换当前历史记录条目，导航到新的 URL 时，当前的条目会被新条目替换掉，这意味着用户不能通过点击后退按钮回到当前页面。
5. 使用 document.referrer
使用场景
获取前一个页面的 URL：当需要知道用户是从哪个页面来到当前页面时。
导航回前一个页面：当需要返回到前一个页面，并且前一个页面的 URL 已知时。
示例代码
function goBack() {
let previousPage = document.referrer;
if (previousPage) {
location.href = previousPage;
} else {
history.back();
}
}
底层原理
document.referrer 是一个只读属性，返回当前文档的引用 URL，即用户是从哪个页面链接到当前页面的。这个属性可以用来获取前一个页面的 URL，但请注意，这个属性可能因浏览器设置或隐私设置而不总是可用。
6. 使用 JavaScript 框架提供的方法
使用场景
使用前端路由：在使用前端路由框架（如 React Router、Vue Router）的应用中，返回上一页可能涉及到前端路由的状态管理。
示例代码
// React Router v6
import { useNavigate } from ‘react-router-dom’;
function GoBackButton() {
const navigate = useNavigate();
return (
<button onClick={() => navigate(-1)}>Go Back</button>
);
}
// Vue Router
import { useRouter } from ‘vue-router’;
export default {
setup() {
const router = useRouter();
return {
goBack() {
router.go(-1);
}
};
},
template: `
<button @click=”goBack”>Go Back</button>
`
};
底层原理
前端路由框架通常提供了自己的历史管理功能，它们可以模拟浏览器的 history 对象的行为，提供前进和后退的功能。使用框架提供的方法可以更方便地在前端路由应用中实现返回上一页的功能。
总结
JavaScript 实现返回上一页的功能主要有以下几种方法：
history.back()：返回到浏览器历史记录中的前一个页面。
window.history.go(-1)：与 history.back() 相同。
location.href 或 location.assign()：导航到特定的 URL，通常用于返回到前一个页面或刷新当前页面。
window.location.replace()：替换当前历史记录条目，导航到新的 URL。
document.referrer：获取前一个页面的 URL，用于导航回前一个页面。
使用前端路由框架提供的方法：在使用前端路由的应用中，使用框架提供的方法来实现返回上一页的功能。
每种方法都有其特定的使用场景和底层原理，选择合适的方法可以根据具体的应用需求来决定。例如，在普通的 Web 应用中，history.back() 或 window.history.go(-1) 是最常用的方法；而在使用前端路由的应用中，可以使用框架提供的方法来更好地管理路由状态。
