【前端】监听页面切换--浏览器页面间切换，路由切换，导航守卫页面刷新或关闭

最新推荐文章于 2024-09-29 16:02:48 发布

灵活的小胖zhi

最新推荐文章于 2024-09-29 16:02:48 发布

阅读量3.1k

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/hejingfang123/article/details/119256691

版权

本文主要探讨在PC端应用中如何监听浏览器页面切换，包括使用vue-visibility-change插件，路由切换的处理，以及vue-router的导航守卫实现页面权限控制。同时，介绍了如何在页面刷新和关闭时进行事件监听。

摘要由CSDN通过智能技术生成

前提，PC端应用

一，监听浏览器页面间切换

场景：浏览器某一个页面A，PC端页面B，页面AB间切换

方案：

1.使用vue-visibility-change

安装：

npm i vue-visibility-change -S

2.导入main.js

import visibility from 'vue-visibility-change';

Vue.use(visibility);

3.使用

i，全局使用：

main.js

visibility.change((evt, hidden) => {

  console.log('global callback: ' + hidden);

});

ii，局部使用

XXX.vue

<template>

    <div v-visibility-change="change">

        ...

    </div>

</template>

methods:{

    change(evt, hidden) {

        //hidden为true的时候，表示从当前页面切换到别的页面

        if(hidden === true){

          console.log('离开当前页了！')

        }

        //hidden为false的时候，表示从别的页面切换回当前页面

        if(h