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

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

三个知识点：

一通过监听浏览器页面可见性改变（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