vue3Setup项目中如何阻止使用浏览器返回键 #153

Anuluca     Date : 2024-08-22   Tags : 3

在 Vue 3 的 setup 组合式 API 中，如果想阻止用户使用浏览器的返回键（或者前进键），可以使用浏览器的 popstate 事件来监控历史记录的变化。通过这个事件，可以拦截用户的返回操作，并进行一些自定义处理，比如阻止导航或弹出提示框。

示例代码

以下是在 Vue 3 setup 中阻止浏览器返回键的基本实现方式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<script setup>
import { onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

onMounted(() => {
  // 监听 popstate 事件
  window.addEventListener('popstate', handlePopState);

  function handlePopState(event) {
    // 阻止浏览器的默认行为（即返回上一个页面）
    event.preventDefault();

    // 可以在这里添加自定义逻辑，比如弹出确认框
    const userConfirmed = confirm('你确定要离开当前页面吗？');
    if (userConfirmed) {
      router.back(); // 或者使用 router.go(-1) 返回上一个页面
    } else {
      // 用户取消了操作，可以通过 pushState 保持当前页面状态
      window.history.pushState(null, null, window.location.pathname);
    }
  }
});

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

关键点说明

1. 监听 popstate 事件：popstate 事件会在浏览器历史记录中的激活条目发生更改时触发。这个事件对于捕获返回操作非常有用。

2. 阻止默认行为：通过 event.preventDefault() 来阻止浏览器的默认行为，即导航到历史记录中的上一个页面。

3. 自定义处理逻辑：在 handlePopState 函数中，可以添加自定义逻辑，如弹出提示框，询问用户是否真的要离开当前页面。如果用户确认，可以调用 router.back() 来执行返回操作；否则，通过 window.history.pushState() 来保持当前页面状态。

4. 移除监听器：在组件卸载（如页面离开或组件销毁）时，记得移除 popstate 事件的监听器，以避免内存泄漏。

注意事项

• 用户体验：强制阻止返回操作可能会导致糟糕的用户体验，因此在使用这种方法时要谨慎。通常建议仅在特殊情况下使用，例如当用户正在填写重要表单或进行支付操作时。

• 兼容性：这个方法适用于大多数现代浏览器，但有些旧版浏览器的行为可能不一致。确保在你目标用户群体的浏览器中测试效果。

通过这种方法，可以有效控制用户的浏览行为，确保在必要时阻止用户意外地离开当前页面。