js实现返回功能

使用 history.back() 方法

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

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

使用 history.go() 方法

通过 history.go(-1) 也可以实现返回上一页的功能，参数 -1 表示后退一步。

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

使用 window.location 重定向

如果需要返回指定页面，可以直接修改 window.location.href 跳转到目标 URL。

function goBack() {
  window.location.href = "previous-page.html";
}

监听按钮点击事件

在 HTML 中绑定按钮的点击事件，触发返回操作。

<button onclick="goBack()">返回</button>
<script>
  function goBack() {
    history.back();
  }
</script>

检查是否可以返回

使用 history.length 判断是否有历史记录可返回，避免在无历史记录时执行无效操作。

function goBack() {
  if (history.length > 1) {
    history.back();
  } else {
    alert("无法返回，没有历史记录");
  }
}

使用 document.referrer

通过 document.referrer 获取上一页的 URL，并跳转回去。

function goBack() {
  if (document.referrer) {
    window.location.href = document.referrer;
  } else {
    alert("无法获取来源页面");
  }
}

结合 Vue/React 实现

在框架中通过事件绑定调用返回方法。

// Vue 示例
methods: {
  goBack() {
    history.back();
  }
}

// React 示例
const handleGoBack = () => {
  history.back();
};