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


相关推荐

  • 基于MATLAB语音信号的处理与滤波

    基于MATLAB语音信号的处理与滤波摘要:MATLAB是十分强大的用于数据分析和处理的工程实用软件,利用其来进行语音信号的分析、处理和可视化十分便捷。文中介绍了在MATLAB环境中如何驱动声卡采集语音信号和语音信号采集后的文档处理方法,并介绍了FFT频谱分析原理及其显示、MATLAB中相关函数的功能、滤波器的设计和使用。在此基础上,对实际采集的一段含噪声语音信号进行了相关分析处理,包括对语音信号的录取和导入,信号时域和频域方面的分析,添加噪声前后的差异对比,滤波分析,语音特效处理。结果表明利用MATLAB处理语音信号十分简单、方便且易于实现。

    2022年5月25日
    52
  • SSH 学习笔记[通俗易懂]

    SSH 学习笔记[通俗易懂]前言:一直对SSH的概念比较陌生,由此而惧怕SSH,因此找来部分博客进行学习,将一些重难点予以记录。文章目录1、SSH原理简介1、SSH原理简介SSH叫安全外壳协议(SecureShell),是一种加密的网络传输协议,可在不安全的网络中网络服务提供安全的传输环境。它通过在网络中创建安全隧道来实现SSH客户端和服务器之间的连接。SSH是一种协议,存在多种实现,既有商业实现,也有开源实现(OSSH,OpenSSH)。公钥:ssh-keygen是安全外壳(SSH)协议套件

    2022年6月24日
    27
  • 计算机本科211调剂到双非值得吗,经验分享:从双非到211,调剂是场快准狠的战役…

    计算机本科211调剂到双非值得吗,经验分享:从双非到211,调剂是场快准狠的战役…经验分享:从双非到211,调剂是场快准狠的战役摘要:最近在论坛中,看到很多18的学弟学妹们焦急询问调剂的相关事宜,作为一个过来人,我是有一些经验的,今天和大家分享我调剂的过程,希望对大家有所帮助。作者佚名次阅读2018-02-19摘要:最近在论坛中,看到很多18的学弟学妹们焦急询问调剂的相关事宜,作为一个过来人,我是有一些经验的,今天和大家分享我调剂的过程,希望对大家有所帮助。【个人情况】先介绍…

    2022年5月6日
    71
  • 安卓中listview的使用步骤_安卓listview控件的用法

    安卓中listview的使用步骤_安卓listview控件的用法1)排序ListView通过适配器得到内容数据,可以对数据list先排序再提供给ListView:privateList>getData(){List>list=newArrayList>();//addData…//对list进行排序if(!list.isEmpty()){Collections.sort(list,newComparator&g…

    2022年9月28日
    2
  • MyBatis中的JdbcType映射数据类型对照表

    MyBatis中的JdbcType映射数据类型对照表在Mybatisd的映射文件mapper.xml中,会用jdbcType把java类映射数据库表字段,有关映射关系做个笔记,方便查阅。JdbcType Oracle MySql JdbcType ARRAY JdbcType BIGINT BIGINT JdbcType BINARY JdbcType BIT BIT JdbcType BLOB BLOB BLOB J

    2022年10月20日
    1
  • Vue.js学习的第一天

    Vue.js学习的第一天官网文档地址:传送门一、Vue介绍:1.Vue.js是什么?作者:2014年2月,尤雨溪曾就职于GoogleCreativeLabs和MeteorDevelopmentGroup。Vue(读音/vjuː/,类似于view)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vu..

    2022年4月9日
    50

发表回复

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

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