在 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);
};
相关推荐
我不吃饼干9 天前
鸽了六年的某大厂面试题:你会手写一个模板引擎吗?
前端·javascript·面试
涵信9 天前
第一节 布局与盒模型-Flex与Grid布局对比
前端·css
我不吃饼干9 天前
鸽了六年的某大厂面试题:手写 Vue 模板编译(解析篇)
前端·javascript·面试
前端fighter9 天前
为什么需要dependencies 与 devDependencies
前端·javascript·面试
满楼、9 天前
el-cascader 设置可以手动输入也可以下拉选择
javascript·vue.js·elementui
veminhe9 天前
HTML5 浏览器支持
前端·html·html5
前端fighter9 天前
Vuex 与 Pinia:全面解析现代 Vue 状态管理的进化之路
前端·vue.js·面试
嘉琪0019 天前
2025——js 面试题
开发语言·javascript·ecmascript
snow@li9 天前
vue3-ts-qrcode :安装及使用记录 / 配置项 / 效果展示
前端·javascript·vue.js
海天胜景9 天前
vue3 el-table 根据字段值 改变整行字体颜色
javascript·vue.js·elementui