VUE如何监听当前页面的隐藏显示

Question

前端用的是vue框架现在有个这样的需求:
第一个页面点击一个按钮打开一个新的页面(是新页面),然后在新页面进行一些操作,完成操作后关闭该页面,这时回到了第一个页面,这是第一个页面要监听到回来了进行一些操作
如何实现监听?我在vue里监听页面的hidden事件没起作用,请问有知道的大佬么,TUT

Answer 1

解决了!监听页面显示隐藏就可以

mounted() {  
  document.addEventListener('visibilitychange', _this.handleVisiable)  
},  
destroyed() {  
  document.removeEventListener('visibilitychange', _this.handleVisiable)  
},  
methods: {  
  handleVisiable(e) {  
    if (e.target.visibilityState === 'visible') {  
      // 要执行的方法
    }  
}

Answer 2

你说是的vue-router的事件？还是组件的，activated 被缓存的组件，created 未被缓存的组件？

Answer 3

用keep-alive包裹组件，然后监听 activated 方法

<div id="app">
    <keep-alive>
        <router-view/>
    </keep-alive>
</div>
...

activated() {
  console.log('被keep-alive 缓存的组件激活时调用')
},

Answer 4

用路由守卫即可。

在第一个页面里添加beforeRouteEnter钩子，它会注入to、from、next三个参数。

检查from.name即可知道是否是从第二个页面跳回来的

beforeRouteEnter(to, from, next) {
    if(from.name==='xxx') {
        // dosomething
    }
}