前提，PC端应用
一，监听浏览器页面间切换
场景：浏览器某一个页面A，PC端页面B，页面AB间切换
方案：
1.使用vue-visibility-change
安装：
npm i vue-visibility-change -S2.导入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(hidden === false){
console.log('回到当前页了！')
}
},
}二，路由切换
这里小编推荐两篇写的比较好的文章，小编尝试过使用里面的方法，但是没有成功，大家可以试一试：
https://www.jianshu.com/p/c0440894c82e
这里提供了三种方式：
watch监听
key是用来阻止“复用”的。（属实没看懂是干啥的，哪位大佬解释下）
通过 vue-router 的钩子函数
https://www.cnblogs.com/shimily/articles/12345757.html
前三个方法都是通过watch监听
最后一个是全局监听路由，其实就是我们下面要说的导航守卫
三，导航守卫（主要用来做进入页面的限制）
官方文档：https://www.cntofu.com/book/132/api/before-each.md
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航，主要用来做进入页面的限制，比如没有登录，就不能查看某些页面，只有登录之后才有权限。有多种机会植入路由导航过程：全局的, 单个路由独享的, 或者组件级的。参数或查询的改变并不会触发进入/离开的导航守卫,当路由发生变化时才会触发
我们可以使用 router.beforeEach添加一个全局的前置钩子函数。这个函数会在路由切换开始时调用。调用发生在整个切换流水线之前。如果此钩子函数拒绝了切换，整个切换流水线根本就不会启动。
在router文件夹下index.js中添加以下代码：
router.beforeEach((to, from, next) => {
// ...
})"to”: 即将要进入的目标路由对象;（这个对象中包含name，params，meta等属性）
"from": 当前导航正要离开的路由对象；（这个对象中包含name，params，meta等属性）
"next”: Function: 确保要调用 next 方法，否则钩子就不会被 resolved。
我们在这里使用的是监控路由跳转：
router.beforeEach((to, from, next) => {
next()
if (from.name === 'pdf') {
console.log("您离开了pdf页面")
}
})四，监听页面刷新和关闭功能
1. 在methods中定义事件方法：
methods: {
beforeunloadFn(e) {
console.log('刷新或关闭')
// ...
}
}2. 在created 或者 mounted 生命周期钩子中绑定事件
created() {
window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
}
或
mounted() {
window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
}3. 在 destroyed 钩子卸载事件
destroyed() {
window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
}4.另外，我们还可以加一个beforeDestroy()钩子函数，在实例销毁之前做一些操作，比如说保存一些东西