在 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);
};
相关推荐
索然无味io20 分钟前
XML外部实体注入--漏洞利用
xml·前端·笔记·学习·web安全·网络安全·php
ThomasChan12337 分钟前
Typescript 多个泛型参数详细解读
前端·javascript·vue.js·typescript·vue·reactjs·js
爱学习的狮王1 小时前
ubuntu18.04安装nvm管理本机node和npm
前端·npm·node.js·nvm
东锋1.31 小时前
使用 F12 查看 Network 及数据格式
前端
zhanggongzichu1 小时前
npm常用命令
前端·npm·node.js
anyup_前端梦工厂1 小时前
从浏览器层面看前端性能:了解 Chrome 组件、多进程与多线程
前端·chrome
zzlyx991 小时前
.NET 9 微软官方推荐使用 Scalar 替代传统的 Swagger
javascript·microsoft·.net
chengpei1471 小时前
chrome游览器JSON Formatter插件无效问题排查,FastJsonHttpMessageConverter导致Content-Type返回不正确
java·前端·chrome·spring boot·json
Bunury1 小时前
组件封装-List
javascript·数据结构·list
我命由我123451 小时前
NPM 与 Node.js 版本兼容问题:npm warn cli npm does not support Node.js
前端·javascript·前端框架·npm·node.js·html5·js