当前位置:首页 > JavaScript

js实现页面返回

2026-02-03 08:45:36JavaScript

使用 history.back() 方法

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

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

使用 history.go() 方法

通过指定负数参数(如 -1)返回上一页,正数参数(如 1)前进到下一页。

js实现页面返回

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

监听浏览器返回按钮事件

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

js实现页面返回

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) 在无历史记录时无效。
  • 单页应用需确保路由库与浏览器历史记录同步。
  • 某些浏览器可能限制脚本触发的返回操作(如跨域限制)。

标签: 页面js
分享给朋友:

相关文章

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 使用JavaScript实现拖拽功能需要监听鼠标事件,包括mousedown、mousemove和mouseup。以下是实现的基本逻辑: const draggableEleme…

js 进度条的实现

js 进度条的实现

使用 HTML 和 CSS 创建基础进度条 HTML 结构可以简单使用一个 div 元素作为容器,内部嵌套另一个 div 表示进度: <div class="progress-containe…

如何react页面

如何react页面

创建 React 页面 使用 create-react-app 快速初始化项目: npx create-react-app my-app cd my-app npm start 基础页面结构 在 s…

js 实现分页

js 实现分页

实现分页的基本逻辑 分页功能通常需要后端返回数据总量或总页数,前端根据当前页码和每页条数截取对应数据。以下是一个基于JavaScript的简单分页实现方案: 前端分页实现 假设已有从后端获取的完整数…

js 实现链表

js 实现链表

链表的基本概念 链表是一种线性数据结构,由一系列节点组成,每个节点包含数据和指向下一个节点的指针。与数组不同,链表在内存中是非连续存储的,插入和删除操作效率较高。 链表的实现 在 JavaScrip…

js实现vr

js实现vr

使用WebXR API实现VR体验 WebXR是浏览器中实现VR和AR体验的标准API,它取代了早期的WebVR。现代浏览器如Chrome、Edge和Firefox已支持WebXR。 // 初始化W…