js实现页面返回

使用 history.back() 方法

调用 history.back() 会导航到浏览器历史记录中的上一页，效果与用户点击浏览器的“后退”按钮相同。

function goBack() {
  history.back();
}

使用 history.go() 方法

通过指定负数参数（如 -1）返回上一页，正数参数（如 1）前进到下一页。

function goBack() {
  history.go(-1);
}

监听浏览器返回按钮事件

通过 popstate 事件监听用户手动触发返回操作，适合需要在返回时执行额外逻辑的场景。

window.addEventListener('popstate', function(event) {
  console.log('用户触发了返回操作');
  // 自定义逻辑
});

使用 window.location 跳转

直接修改 window.location.href 或调用 replace() 方法强制跳转（无历史记录）。

// 返回上一页（需记录上一页URL）
function goBack() {
  window.location.href = document.referrer; // 获取来源页URL
}

// 替换当前页（不保留历史记录）
function replacePage() {
  window.location.replace('https://example.com');
}

单页应用（SPA）的路由返回

在 Vue、React 等框架中，使用路由库提供的导航方法（如 router.go(-1)）。

// Vue Router 示例
this.$router.go(-1);

// React Router 示例
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate(-1);

注意事项

• history.back() 和 history.go(-1) 在无历史记录时无效。
• 单页应用需确保路由库与浏览器历史记录同步。
• 某些浏览器可能限制脚本触发的返回操作（如跨域限制）。