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

visibilitychange – 指定标签页可见时,刷新页面数据三个知识点:一通过监听浏览器页面可见性改变(visibilitychange)事件,来判断标签页是否可见二配置路由的meta,来判断是否是指定的标签页三调用其它模块的actions,刷新数据router.jsroutes:[{path:”/”,redirect:”index”},{path:”/ind…

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

三个知识点:

    一通过监听浏览器页面可见性改变(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.net/148022.html原文链接:https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Android 9.0 WebView无法加载页面报错 net:ERR_CLEARTEXT_NOT_PERMITTED

    Android 9.0 WebView无法加载页面报错 net:ERR_CLEARTEXT_NOT_PERMITTED

    2021年10月2日
  • FindWindow函数

    FindWindow函数FindWindow函数用来查询主窗口(子窗口不能查询),并且返回窗口句柄。函数原型:praram[in]lpClassName:以NULL结尾的字符串,如果为NULL,则查找所有与lpWindow

    2022年7月2日
  • 实战中遇到的C++流文件重置的一个大陷阱 为什么ifstream的seekg函数无效

    实战中遇到的C++流文件重置的一个大陷阱 为什么ifstream的seekg函数无效实战中遇到的C++流文件重置的一个大陷阱为什么ifstream的seekg函数无效

    2022年5月30日
  • Android 代码混淆

    Android 代码混淆Android代码混淆简介在我们日常开发中,对已经开发完成的源代码,需做一些代码混淆工作,以对代码起到一种保护和降低安装包体积的作用。开启混淆在app的build.gradle文件中如下代码:android{……buildTypes{release{//开启代码混淆minifyEnabledtrue//开启资源混淆,移除未使用的资源shri

    2022年5月30日
  • CAS算法的理解及应用「建议收藏」

    CAS算法的理解及应用「建议收藏」应用原子操作类,例如AtomicInteger,AtomicBoolean …适用于并发量较小,多cpu情况下;Java中有许多线程安全类,比如线程安全的集合类。从Java5开始,在java.util.concurrent包下提供了大量支持高效并发访问的集合接口和实现类。如:ConcurrentMap、ConcurrentLinkedQueue等线程安全集合。引入问题那么问题来了,这些线程安全类的底层是怎么保证线程安全的,你可能会想到是不是使用同步代码锁synchronized?引入概念这些线

    2022年8月9日
  • 常用的免费好用的DNS有哪些?

    常用的免费好用的DNS有哪些?阿酷TONY原创文章关键词:免费dns、百度dns、阿里dns、114dns、GoogleDNS2019-1-24DNS(DomainNameServer,域名服务器)是进行域名(domainname)和与之相对应的IP地址(IPaddress)转换的服务器。DNS中保存了一张域名(domainname)和与之相对应的IP地址(IPaddress)的表,以解析…

    2022年6月7日

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号