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

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

使用 Vue 3 实现：

<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，并移除事件监听器：

const restoreNavigation = () => {
  isNavigationDisabled.value = false;
  window.removeEventListener('popstate', handlePopState);
};