Vue中 监听浏览器切换标签实现多窗口处理流程刷新效果

586 阅读1分钟

现在有个需求,在 页面a ,点击超链接跳转到页面b, 在b处理完流程后,关闭网页,回到页面a时,a页面需要刷新流程处理状态, 比如 从 待处理 变成 已 处理

在vue中使用 init方法是我调接口的方法

mounted(){
  //添加浏览器标签切换事件监听
  document.addEventListener('visibilitychange', this.handleVisiable)
},
destroy(){
  window.removeEventListener("visibilitychange",this.handleVisiable)
},
methods: {
  handleVisiable(e) {
    switch(e.target.visibilityState) {
      case 'hidden':
        // console.log('内容不可见,处理后台、最小化、锁屏状态')
        break;
      case 'visible':
        console.log('处于正常打开')
        this.init();
        break;
    }
  },
  init() {
   //重新请求数据...
   //request.....将页面数据重新赋值...
  },
},