visibilitychange – 指定标签页可见时，刷新页面数据

全栈程序员站长

发布于 2022-07-02 14:24:51

6330

发布于 2022-07-02 14:24:51

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

三个知识点：

一通过监听浏览器页面可见性改变（visibilitychange）事件，来判断标签页是否可见

二配置路由的meta，来判断是否是指定的标签页

三调用其它模块的actions，刷新数据

router.js

routes: [
  {
    path: "/",
    redirect: "index"
  }, {
    path: "/index",
    name: "index",
    meta: { dataRefresh: true },
    component: Index
  }, {
    path: "check",
    name: "check",
    meta: { dataRefresh: false },
    component: () => import("@/views/check/check.vue")
  }
]

main.js

new Vue({
  router,
  store,
  render: h => h(App),
  created() {
    window.document.addEventListener('visibilitychange', () => {
      if(window.document.visibilityState === 'visible' && this.$router.history.current) {
        let currentRouter = this.$router.history.current
        if(currentRouter.meta.dataRefresh) {
          // 调用首页模块的actions，刷新列表数据
          store.dispatch('home/fetchListData')
        }
      }
    })
  }
}).$mount('#app');

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/148022.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

java