VUE如何监听当前页面的隐藏显示
侧边栏壁纸
  • 累计撰写 113,808 篇文章
  • 累计收到 1 条评论

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

点点
2022-11-28 / 8 评论 / 2 阅读 / 正在检测是否收录...

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

chasec

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

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

chasec

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

linong

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

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

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

T_one

用路由守卫即可。

在第一个页面里添加beforeRouteEnter钩子,它会注入tofromnext三个参数。

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


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

redbuck

0

评论 (8)

取消