我在做项目的时候，有一个需求，在离开（跳转或者关闭）购物车页面或者刷新购物车页面的时候向服务器提交一次购物车商品数量的变化。

beforeDestroy() { console.log('销毁组件'）
 this.finalCart()},
顺便复习了一下 JavaScript 中的一些加载，卸载事件：
  
页面关闭时，先爋nbeforeunload 事件，再爋nunload 事件。
  

Vue中监听页面刷新和关闭
methods: {
 beforeunloadFn(e) {
  console.log('刷新或关闭')
  // ...
 }
}

created() {
 window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
}
destroyed() {
 window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
}

created() {
 this.initCart()
 window.addEventListener('beforeunload', this.updateHandler)
},
beforeDestroy() {
 this.finalCart() // 提交购物车的异步操作},
destroyed() {
 window.removeEventListener('beforeunload', this.updateHandler)},
methods: {
 updateHandler() {
  this.finalCart()
 },
 finalCart() {
  // ...
 }
}总结

以上所述是小编给大家介绍的Vue监听页面刷新和关闭功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！