在实际开发项目中,有时候我们需要在刷新和关闭时,触发一些功能,那么如何监听到页面的刷新和关闭呢?

1. 在methods中定义事件方法:
methods: {
  beforeunloadFn(e) {
    console.log('刷新或关闭')
    // ...
  }
}
2. 在created 或者 mounted 生命周期钩子中绑定事件
created() {
  window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
}
3. 在 destroyed 钩子卸载事件
destroyed() {
  window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
}

测试了页面刷新和关闭都能监听到。

项目实测

回到我自己的项目,可以使用 onbeforeunload 事件和 beforeDestroy 钩子函数结合:

created() {
  window.addEventListener('beforeunload', this.beforeunloadFn())
},
destroyed() {
  window.removeEventListener('beforeunload', this.beforeunloadFn())
},
methods: {
  gotoPage(path){
    this.$router.push(path);

    this.$store.state.iframeSrc = this.$route.meta.link;
    this.$store.state.iframeTitle = this.$route.meta.title;
  },
  beforeunloadFn() {
    console.log('刷新或关闭');

    if(this.$route.path == '/system/knowledgeGraph') {
      this.gotoPage(this.graphItems.path);
    }
  }
}
Logo

前往低代码交流专区

更多推荐