在 Vue 3 中实现点击按钮后禁止浏览器前进或后退

在 Vue 3 中实现点击按钮后禁止浏览器前进或后退,我们可以通过 refwatch 来管理状态,同时使用 onBeforeUnmount 来清理事件监听。

使用 Vue 3 实现:

javascript 复制代码
<template>
  <div>
    <button @click="disableNavigation">点击禁用前进或后退</button>
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from 'vue';

// 定义一个 ref 用来控制是否禁用浏览器的前进或后退
const isNavigationDisabled = ref(false);

// 禁用前进后退的函数
const disableNavigation = () => {
  // 向历史栈添加一个状态,这样浏览器无法后退
  window.history.pushState(null, '', window.location.href);

  // 启用禁用前进后退的功能
  isNavigationDisabled.value = true;

  // 监听 popstate 事件,如果尝试前进或后退,则阻止
  window.addEventListener('popstate', handlePopState);
};

// 处理 popstate 事件
const handlePopState = () => {
  if (isNavigationDisabled.value) {
    // 阻止浏览器的前进或后退
    window.history.pushState(null, '', window.location.href);
  }
};

// 组件销毁时移除事件监听器
onBeforeUnmount(() => {
  window.removeEventListener('popstate', handlePopState);
});
</script>

代码解释:

  1. isNavigationDisabled

    • 使用 ref 来存储是否禁用前进和后退的状态。这个变量控制我们是否启用了拦截浏览器的行为。
  2. disableNavigation

    • 该函数会在点击按钮时执行,通过 window.history.pushState 向浏览器历史栈中添加一个状态,防止后退。
    • 设置 isNavigationDisabled.value = true 来标记禁用状态,并且通过 window.addEventListener 监听 popstate 事件来阻止前进或后退。
  3. handlePopState

    • 这是我们用于拦截浏览器后退或前进的事件处理函数。每当触发 popstate 事件时,我们会检查 isNavigationDisabled.value 是否为 true,如果是的话,就会再次调用 window.history.pushState,从而阻止浏览器进行实际的导航。
  4. onBeforeUnmount

    • onBeforeUnmount 是 Vue 3 中的生命周期钩子,用来在组件销毁前清理资源。在这里我们用它来移除 popstate 事件监听器,以避免内存泄漏。

扩展:恢复浏览器前进和后退

如果你希望在某些操作后恢复浏览器的前进和后退功能,你只需要将 isNavigationDisabled.value 设置为 false,并移除事件监听器:

javascript 复制代码
const restoreNavigation = () => {
  isNavigationDisabled.value = false;
  window.removeEventListener('popstate', handlePopState);
};
相关推荐
求知若渴,虚心若愚。1 小时前
Error reading config file (/home/ansible.cfg): ‘ACTION_WARNINGS(default) = True
linux·前端·ansible
LinDaiuuj2 小时前
最新的前端技术和趋势(2025)
前端
paopaokaka_luck2 小时前
婚纱摄影管理系统(发送邮箱、腾讯地图API、物流API、webSocket实时聊天、协同过滤算法、Echarts图形化分析)
vue.js·spring boot·后端·websocket·算法·echarts
一只小风华~2 小时前
JavaScript 函数
开发语言·前端·javascript·ecmascript·web
程序猿阿伟3 小时前
《不只是接口:GraphQL与RESTful的本质差异》
前端·restful·graphql
仰望星空的凡人4 小时前
【JS逆向基础】数据库之MongoDB
javascript·数据库·python·mongodb
若梦plus4 小时前
Nuxt.js基础与进阶
前端·vue.js
樱花开了几轉5 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
风清云淡_A5 小时前
【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据
前端·react.js
小飞大王6665 小时前
React与Rudex的合奏
前端·react.js·前端框架