vue页面监听是否置为后台或可见状态

推荐插件
vue-visibility-change

使用方式
安装

npm i vue-visibility-change

全局使用

import Vue from 'vue'
import visibility from 'vue-visibility-change'

Vue.use(visibility)

const listenPageVisible = visibility.change((evt, hidden) => {
  console.log('隐藏: ' + hidden)
})

局部使用

<template>
  <div v-visibility-change="listenVisible"></div>
</template>
<script>
export default {
  methods: {
    listenVisible(evt, hidden) {
      console.log('隐藏: ' + hidden)
    }
  }
}
</script>
### Vue 中两种监听方式的用法与区别 #### 一、路由监听方式 Vue 的路由监听可以通过多种方式进行实现,其中最常见的是 **watch** 和 **导航守卫**。 1. **通过 `watch` 监听 `$route` 对象的变化** 使用 `watch` 可以直接监控路由对象的变化。当路由发生变化时,会触发相应的回调函数[^1]。 ```javascript watch: { $route(to, from) { console.log('路由变化:', to.path); // 执行其他逻辑操作 } } ``` 2. **通过组件内的导航守卫进行监听** 组件内提供了三个特定于组件的导航守卫:`beforeRouteEnter`、`beforeRouteUpdate` 和 `beforeRouteLeave`。这些守卫允许开发者在进入、更新离开某个组件对应的路由时执行自定义逻辑。 - `beforeRouteEnter`: 在进入目标组件之前调用,无法访问 `this`,因为此时组件实例还未创建。 - `beforeRouteUpdate`: 当前路由改变但该组件被复用时调用,可以访问 `this`。 - `beforeRouteLeave`: 导航离开当前组件对应路由时调用,可以取消导航。 示例代码如下: ```javascript export default { beforeRouteEnter(to, from, next) { console.log('即将进入路由'); next(); }, beforeRouteUpdate(to, from, next) { console.log('路由参数发生了变化'); next(); }, beforeRouteLeave(to, from, next) { const confirmLeave = window.confirm('确认要离开吗?'); if (confirmLeave) { next(); } else { next(false); } } }; ``` --- #### 二、页面可见监听方式 另一种常见的监听场景是对浏览器窗口状态的感知,比如检测用户是否离开了当前页面者切换到后台运行的状态。这通常利用 DOM 提供的 `visibilitychange` 事件来完成[^2]。 ```javascript export default { mounted() { document.addEventListener('visibilitychange', this.handleVisibilityChange); }, destroyed() { document.removeEventListener('visibilitychange', this.handleVisibilityChange); }, methods: { handleVisibilityChange(event) { switch (event.target.visibilityState) { case 'prerender': console.log('网页预渲染,内容不可见'); break; case 'hidden': console.log('内容不可见,处理后台、最小化、锁屏状态'); alert('警告!你已经离开当前答题页面'); break; case 'visible': console.log('处于正常打开'); break; } } } }; ``` 这种方式主要用于捕获用户的交互行为,例如判断用户是否暂时关闭了标签页将应用最小化。 --- ### 区别总结 | 特性 | 路由监听 | 页面可见监听 | |--------------------------|-----------------------------------|----------------------------------| | **适用范围** | 针对路由跳转 | 针对页面显示/隐藏 | | **核心机制** | 基于 Vue Router API | 利用原生 DOM Event | | **典型用途** | 数据加载、权限校验 | 用户在线离线状态监测 | | **生命周期关联** | 关联至组件全局级别 | 主要在 `mounted` 和 `destroyed` | 两者虽然都属于监听范畴,但在实际开发中的应用场景完全不同,需根据具体需求选择合适的方案。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值