Vue基础知识-（二十二）Vue实现监听页面的变化

本文最后更新于：May 17, 2022 pm

Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

目录

监听页面切换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<template>
  <div>
    <h3>首页</h3>
    <h4>{{ cntC }}</h4>
  </div>
</template>

<script>

export default {
  name: "index",
  data() {
    return{
      cntC:1,
    }
  },
  methods: {
    handleVisiable(e) {
      switch(e.target.visibilityState) {
        case 'prerender':
          console.log('网页预渲染，内容不可见')
          break;
        case 'hidden':
          console.log('内容不可见，处理后台、最小化、锁屏状态')
          this.cntC=this.cntC+1;
          alert('警告！你已经离开当前答题页面');
          break;
        case 'visible':
          console.log('处于正常打开')
          break;
      }
    }
  },
  mounted() {
    document.addEventListener('visibilitychange', this.handleVisiable)
  },
  destroyed() {
    document.removeEventListener('visibilitychange', this.handleVisiable)
  },
}
</script>

<style scoped>

</style>

监听页面刷新

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<template>
  <div>
    <h3>首页</h3>
    <h4>{{ cntC }}</h4>
  </div>
</template>

<script>

export default {
  name: "index",
  data() {
    return{
      cntC:1,
    }
  },
  methods: {
    beforeunloadHandler(e) {    //根据事件进行操作进行操作
      console.log(e)
      console.log('浏览器刷新')
      this.cntC=this.cntC+1;
    },
  },
  mounted() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))   //监听页面刷新触发事件
  },
  destroyed () {  //进行监听销毁
    window.removeEventListener('beforeunload', e =>this.beforeunloadHandler(e))
  },
}
</script>

<style scoped>

</style>