如何监听页面刷新并终止执行加载进行刷新

通过beforeRouteEnter监听进入刷新,并通过next()函数进行刷新。

<script>
export default {
  data() {
    return {
      arrs: [],
      isDefault: true,
      bomId: "",
      file: "",
      pasteFile: "",
      docName: "",
    };
  },
  methods: {
    setRefreshFlag() {
      // 在页面卸载前设置刷新标记
      sessionStorage.setItem('pageRefreshed', 'true');
    },
  },
  beforeRouteEnter(to, from, next) {
    // 检查是否有刷新状态标记
    const isRefreshed = sessionStorage.getItem('pageRefreshed') === 'true';
    // 清除标记,避免影响后续导航
    sessionStorage.removeItem('pageRefreshed');
    const bomId = sessionStorage.getItem('pageRefreshedBOMID');
    if (isRefreshed && to.query.file && bomId) {
      // 页面是从刷新而来的 并且有表格参数 执行终止并跳转(刷新)
      next({ path: '/home/publishInquiry',query: { bomId, type: "2"} });
    } else {
      next();
    }
  },
  mounted() {
    // 设置 beforeunload 事件监听器,用于检测页面刷新
    window.addEventListener('beforeunload', this.setRefreshFlag);
  },
  beforeDestroy() {
    // 移除事件监听器
    window.removeEventListener('beforeunload', this.setRefreshFlag);
  },
};
</script>
posted on 2025-09-10 16:00  jv_coder  阅读(9)  评论(0)    收藏  举报