Visibilitychange – refresh the page data when the specified tab is visible

Hello everyone , I meet you again , I'm your friend, Quan Jun .

Three knowledge points ：

One is to change the visibility of the browser page by listening （visibilitychange） event , To judge label Whether the page is visible

II. Configure routing meta, To determine whether it is the specified tab

3. Calling other modules actions, Refresh data

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")
  }
]

Copy

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) {
          //  Calling the homepage module actions, Refresh list data 
          store.dispatch('home/fetchListData')
        }
      }
    })
  }
}).$mount('#app');

Copy

Publisher ： Full stack programmer stack length , Reprint please indicate the source ：https://javaforall.cn/148022.html Link to the original text ：https://javaforall.cn