当前位置：首页 > VUE

vue实现离开页面弹窗

2026-02-21 21:53:10VUE

监听路由变化实现离开弹窗

在 Vue 中可以通过 beforeRouteLeave 路由守卫实现离开页面前的弹窗提示。此方法适用于 Vue Router 环境，需在组件内定义守卫逻辑。

export default {
  beforeRouteLeave(to, from, next) {
    const answer = window.confirm('确定要离开吗？未保存的更改可能会丢失。');
    if (answer) {
      next(); // 允许离开
    } else {
      next(false); // 取消导航
    }
  }
};

若需使用自定义弹窗组件（如 Element UI 的 MessageBox），替换 window.confirm 即可：

import { MessageBox } from 'element-ui';

export default {
  beforeRouteLeave(to, from, next) {
    MessageBox.confirm('确定离开当前页面？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    }).then(() => {
      next();
    }).catch(() => {
      next(false);
    });
  }
};

监听浏览器关闭或刷新事件

若需在用户直接关闭浏览器或刷新页面时触发弹窗，可通过 window.onbeforeunload 实现：

export default {
  mounted() {
    window.addEventListener('beforeunload', this.handleBeforeUnload);
  },
  beforeDestroy() {
    window.removeEventListener('beforeunload', this.handleBeforeUnload);
  },
  methods: {
    handleBeforeUnload(e) {
      e.preventDefault();
      e.returnValue = '确定离开吗？未保存的数据将丢失。';
    }
  }
};

注意：现代浏览器可能仅显示默认提示文本，忽略自定义消息内容。

结合数据状态判断是否需要弹窗

在路由守卫或 beforeunload 事件中，可通过检查数据状态（如表单是否已修改）决定是否触发弹窗：

export default {
  data() {
    return {
      isFormDirty: false // 标记表单是否被修改
    };
  },
  beforeRouteLeave(to, from, next) {
    if (this.isFormDirty) {
      MessageBox.confirm('数据未保存，确定离开？', '提示')
        .then(() => next())
        .catch(() => next(false));
    } else {
      next();
    }
  }
};

使用 Vuex 或 Pinia 管理全局状态

若需跨组件共享离开确认逻辑，可将状态管理（如未保存标志）存储在 Vuex 或 Pinia 中：

vue实现离开页面弹窗

// store.js (Pinia 示例)
import { defineStore } from 'pinia';

export const useAppStore = defineStore('app', {
  state: () => ({
    hasUnsavedChanges: false
  })
});

// 组件内
import { useAppStore } from './store';

export default {
  setup() {
    const store = useAppStore();
    const beforeRouteLeave = (to, from, next) => {
      if (store.hasUnsavedChanges) {
        // 弹窗逻辑
      } else {
        next();
      }
    };
    return { beforeRouteLeave };
  }
};