当前位置:首页 > JavaScript

js实现回退

2026-02-01 10:54:31JavaScript

使用 window.history 回退

通过 window.history.back() 方法实现返回上一页,等同于浏览器后退按钮的功能。

window.history.back();

监听回退按钮事件

通过 popstate 事件监听浏览器后退/前进操作,可在用户手动触发后退时执行自定义逻辑。

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

使用 history.go() 控制回退步数

history.go(-1) 返回上一页,history.go(-2) 返回前两页,依此类推。

window.history.go(-1); // 回退一步

单页应用(SPA)路由回退

若使用 react-routervue-router,可通过路由提供的导航方法实现回退:

  • React Router v6:
    import { useNavigate } from 'react-router-dom';
    const navigate = useNavigate();
    navigate(-1); // 回退一步
  • Vue Router:
    this.$router.go(-1); // 回退一步

强制重定向替代回退

若需避免用户返回某些页面(如登录后),可用 window.location.replace 替换历史记录:

js实现回退

window.location.replace('/home'); // 当前页被替换,无后退记录

注意事项

  • history.back()history.go() 受同源策略限制,无法跨域操作。
  • 单页应用需确保路由堆栈管理正确,避免多次回退导致意外跳转。

标签: js
分享给朋友:

相关文章

vue实现js休眠

vue实现js休眠

实现 JavaScript 休眠的方法 在 Vue 中实现 JavaScript 休眠(延迟执行)可以通过以下方式实现。由于 JavaScript 本身没有内置的 sleep 函数,通常使用 Prom…

js实现下拉菜单

js实现下拉菜单

使用HTML和CSS创建基础结构 HTML部分需要包含一个触发下拉的按钮和隐藏的下拉菜单内容: <div class="dropdown"> <button class="dr…

js 实现页面刷新

js 实现页面刷新

使用 location.reload() location.reload() 是原生 JavaScript 提供的页面刷新方法。调用该方法会重新加载当前页面,相当于点击浏览器的刷新按钮。 // 基本…

js实现删除

js实现删除

使用 splice 方法删除数组元素 splice 方法可以删除数组中的元素,并返回被删除的元素。它接受两个参数:起始索引和要删除的元素数量。 const array = [1, 2, 3, 4…

js 实现按钮点击

js 实现按钮点击

实现按钮点击的 JavaScript 方法 HTML 按钮元素 在 HTML 中创建一个按钮,可以通过 <button> 或 <input> 标签实现: <button…

js实现同步

js实现同步

同步与异步的概念 在JavaScript中,同步代码会按照顺序执行,每一行代码必须等待上一行代码执行完成后才能运行。异步代码则允许在等待某些操作(如网络请求)完成的同时继续执行其他代码。 实现同步的…