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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 关于radcontrols控件之Radupload「建议收藏」

    关于radcontrols控件之Radupload「建议收藏」Namespace:Telerik.Windows.ControlsAssembly:Telerik.Windows.Controls.Input(inTelerik.Windows.Controls.Input.dll)RadUpload是客户端和服务器端的一部分。在客户端执行完全在浏览器中使用Silverlight的平台。在服务器端需要处理的服务器进行处理的文件提交到客户端。检查在…

    2022年7月24日
    4
  • install application_installing

    install application_installinglmdbinstallation

    2022年9月29日
    0
  • navicat premium12 mac 激活码【中文破解版】

    (navicat premium12 mac 激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.htmlS32PGH0SQB-eyJsaWNlbnNlSWQi…

    2022年3月26日
    763
  • C++学习——memset函数详解

    C++学习——memset函数详解memset是计算机中C/C++语言初始化函数。作用是将某一块内存中的内容全部设置为指定的值, 这个函数通常为新申请的内存做初始化工作。头文件 <string.h>或 < cstringh >函数介绍void *memset(void *s, int ch, size_t n);函数解释:将s中当前位置后面的n个字节 (typedef unsigned int si…

    2022年8月18日
    6
  • AnalyticDB for MySQL 3.0 技术架构解析

    AnalyticDB for MySQL 3.0 技术架构解析企业数据需求不断变化,近年来变化趋势日益明显,从数据的3V特性看:体积,速度和变化;BigData强调数据量,PB级以上,是静态数据。而FastData在数据量的基础上,意味着速度和和变化,意味着客户可以更加实时化、更加快速地进行数据处理。在Forrester最近的一项研究中,超过75%的…

    2022年9月17日
    0
  • 移动通信网络架构的演进过程_移动通信演进路线图

    移动通信网络架构的演进过程_移动通信演进路线图原文地址:http://blog.sina.com.cn/s/blog_64827e4c010105nl.html

    2022年9月21日
    0

发表回复

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

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