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


相关推荐

  • php使用microtime(true)查看代码执行时间

    php使用microtime(true)查看代码执行时间

    2021年11月3日
    45
  • vs2012 MinGW 编译ffmeg 引用外部库libx264,librtmp[通俗易懂]

    vs2012 MinGW 编译ffmeg 引用外部库libx264,librtmp[通俗易懂]VS2012如何编译ffmpeg前面已经有文章讲过,本来主要讲述如何引用外部库libx264,librtmp,ffmpeg版本是3.0.2。1.下载x264源文件并编译源码地址是http://www.videolan.org/developers/x264.html。l…

    2025年12月11日
    4
  • 时序数据预测:ARIMA

    时序数据预测:ARIMA本文尝试应用 ARIMA 时间序列模型对具有明显季节规律的月度时序数据进行预测 样本数据来源于本人项目工作中的某地区某行业电量 已脱敏处理 外加搜集了部分外部宏观经济 气象数据 时间跨度 2017 年 1 月至今 思路 将原始时序数据进行周期分解为趋势部分 周期部分 残差部分 趋势部分应用 ARIMA 建模预测 周期部分取历年月均值 残差部分计算残差上界 残差下界并应用 Lasso 回归模型基于外部影响因素建模预测 最后对各部分结果采用不同方案进行叠加 经判断后选取最合理的方案结果作为最终预测结果 本文成果开发

    2025年5月9日
    9
  • MySQL数据库基础知识点总结

    MySQL数据库基础知识点总结1数据库简介数据库(Database)就是按照数据结构来组织,存储和管理数据的仓库专业的数据库是专门对数据进行创建,访问,管理,搜索等操作的软件,比起我们自己用文件读写的方式对象数据进行管理更加的方便,快速,安全1.1作用对数据进行持久化的保存方便数据的存储和查询,速度快,安全,方便可以处理并发访问更加安全的权限管理访问机制1.2数据库类型1.3常见的数据库类型常见数据库类型分两大类,一类是关系型数据库。另一类是非关系型数据库。关系型数据库:MySQL,Oracle,P

    2022年8月20日
    8
  • mac. navcat 激活码【2022最新】2022.02.19

    (mac. navcat 激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年4月1日
    41
  • 关于UrlHttpConnection.setRequestProperty()的调用顺序问题的验证「建议收藏」

    关于UrlHttpConnection.setRequestProperty()的调用顺序问题的验证「建议收藏」因为在项目中使用到了HttpURLConnection请求资源,对于其中的方法setRequestProperty()

    2025年10月18日
    2

发表回复

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

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