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)
上一篇 2022年6月15日 下午3:00
下一篇 2022年6月15日 下午3:00


相关推荐

  • 谷歌浏览器无法上网问题解决方案_只有浏览器不能上网

    谷歌浏览器无法上网问题解决方案_只有浏览器不能上网今天清理垃圾时不小心删错了文件,导致谷歌浏览器一直无法上网,qq倒是能登陆。网上找了很多方法都没效果,什么取消代理服务器、管家网络修复、设置sfc什么通通都试过了。最后的解决办法是:1.win+r

    2022年8月1日
    7
  • MFC中的SetCapture、ReleaseCapture、GetCapture函数「建议收藏」

    MFC中的SetCapture、ReleaseCapture、GetCapture函数「建议收藏」转载地址:http://blog.csdn.net/laowu_/article/details/6839345  正常情况下,鼠标指针位于哪个窗口区域内,鼠标消息就自动发给哪个窗口。如果调用了SetCapture,之后无论鼠标的位置在哪,鼠标消息都发给指定的这个窗口,直到调用ReleaseCapture或者调用SetCapture设置另一个窗口为止。很多时候,窗口或控件在鼠标按下后,需…

    2022年5月29日
    84
  • makefile 编译参数_gcc使用说明

    makefile 编译参数_gcc使用说明gcc编译源文件共有4个过程,预处理、编译、汇编、链接。预处理:命令:gcc-Etest.c-otest.i(-o后面指定生成文件的命名)过程:展开宏定义(#define),处理编译条件指令(#if#ifndef等),插入引用的头文件(#include),删除注释,添加行号和文件标识。结果:生成.i文件,一般的文本编辑器都能打开编译:命令:gcc-Ste…

    2022年10月13日
    4
  • Coturn配置

    Coturn配置原文链接 http blog csdn net u0 article details coturn 服务器下载 https github com coturn coturn 由三个地方需要修改 nbsp 1 vim etc default coturn 把上面打开编辑的文件中的这一行 TURNSERVER ENABLED 1 去掉

    2026年3月20日
    2
  • idea中创建一个web项目

    idea中创建一个web项目第一步:新建空的java项目在idea项目下,新建一个model,这个model就可以是一个java项目。然后会弹出一个框,选择新建java项目:点击【next】之后进入下一步,取model项目名称:写好名称和存放的路径之后,点击【finish】完成java的model项目创建:以上就是一个空的java项目的创建。第二步:在java项目的基础上创建web项目右击刚创建的java项目,添加web项目所需架构,如下图:点击【AddFrameworksSupport】之后,会弹出一个

    2022年8月29日
    4
  • pycharm2018 3激活成功教程key is invalid解决方法

    pycharm2018 3激活成功教程key is invalid解决方法一 简介前段时间电脑更新固态删除了之前安装的 pycharm 现在重新安装遇到了一些问题 之前安装激活成功教程十分简单 就是 1 下载激活成功教程补丁到 pycharm 的 bin 目录下 2 修改 bin 目录下的配置文件 3 打开 pycharm 输入激活码 结果现在到了输入激活码这一步总是产生 keyisinvalid 的问题 最后找到了问题所在二 解决方法出问题的原因是我下载的是 pycharm20183 3

    2026年3月27日
    2

发表回复

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

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