vue 如何判断 页面关闭和刷新的动作

在 Vue.js 中，你可以通过监听浏览器的 `beforeunload` 或 `popstate` 事件来判断页面的关闭或刷新动作。这两个事件分别在页面卸载（如用户点击浏览器返回按钮或关闭标签页）和历史状态改变（如前进或后退）时触发。

以下是简单的示例：

1. 使用 `beforeunload` 事件（适用于所有类型的导航，包括刷新、关闭、前进和后退）:

window.addEventListener('beforeunload', function (event) {
  // 在这里可以添加你的处理逻辑，比如保存数据或清理资源
  event.preventDefault();
  event.returnValue = '';
});

2. 如果你想针对刷新操作单独处理，可以在路由守卫 (`router.beforeEach`, `router.afterEach`) 中检查目标路径是否与当前路径相同：

const router = new VueRouter({
  onReady() {
    window.addEventListener('popstate', function () {
      if (window.history.state.path === router.currentRoute.path) {
        // 这里是刷新操作的处理逻辑
      }
    });
  },
  routes: [...]
});

请注意，`beforeunload` 的处理可能会阻止浏览器默认的行为（如弹出确认框），所以在实际使用时需要谨慎考虑。