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

比眉伴天荒 2022-09-02 05:20 569阅读 0赞

前提，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

methods:{
    
        change(evt, hidden) {
    
            //hidden为true的时候，表示从当前页面切换到别的页面
    
            if(hidden === true){
    
              console.log('离开当前页了！')
    
            }
    
            //hidden为false的时候，表示从别的页面切换回当前页面
    
            if(hidden === false){
    
              console.log('回到当前页了！')
    
            }
    
        },
    }

二，路由切换

这里小编推荐两篇写的比较好的文章，小编尝试过使用里面的方法，但是没有成功，大家可以试一试：

[https://www.jianshu.com/p/c0440894c82e][https_www.jianshu.com_p_c0440894c82e]

这里提供了三种方式：

watch监听

key是用来阻止“复用”的。（属实没看懂是干啥的，哪位大佬解释下）

通过 vue-router 的钩子函数

[https://www.cnblogs.com/shimily/articles/12345757.html][https_www.cnblogs.com_shimily_articles_12345757.html]

前三个方法都是通过watch监听

最后一个是全局监听路由，其实就是我们下面要说的导航守卫

三，导航守卫（主要用来做进入页面的限制）

官方文档：[https://www.cntofu.com/book/132/api/before-each.md][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()钩子函数，在实例销毁之前做一些操作，比如说保存一些东西

[https_www.jianshu.com_p_c0440894c82e]: https://www.jianshu.com/p/c0440894c82e
[https_www.cnblogs.com_shimily_articles_12345757.html]: https://www.cnblogs.com/shimily/articles/12345757.html
[https_www.cntofu.com_book_132_api_before-each.md]: https://www.cntofu.com/book/132/api/before-each.md