网站地图    收藏   

主页 > 前端 > vue教程 >

Vue监听页面刷新和关闭功能

来源:自学PHP网    时间:2019-07-23 15:23 作者:小飞侠 阅读:

[导读] Vue监听页面刷新和关闭功能...

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

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监听页面刷新和关闭功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论