vue重新进入页面,js不加载

问题描述见图:

在这里插入图片描述

解决办法:

主要监听document的visibilitychange事件

     在vue的methods
 /* 监听页面显示隐藏 */
    onPageVisibility(functions) {
      var _t = {};

      var onShowCall = function () {
        if (!functions || !functions.show) {
          return;
        }
        window.clearTimeout(_t.showTime);
        _t.showTime = window.setTimeout(function () {
          functions.show();
        }, 100);
      };

      var onHideCall = function () {
        if (!functions || !functions.hide) {
          return;
        }
        window.clearTimeout(_t.hideTime);
        _t.hideTime = window.setTimeout(function () {
          functions.hide();
        }, 100);
      };

      document.addEventListener('visibilitychange', function () {
        var visibility = document.visibilityState;
        if (visibility == 'visible') {
          onShowCall();
        } else if (visibility == 'hidden') {
          onHideCall();
        }
      });

      window.addEventListener(
        'pageshow',
        function () {
          onShowCall();
        },
        false
      );

      window.addEventListener(
        'pagehide',
        function () {
          onHideCall();
        },
        false
      );
    },
mounted里调用  在data里定义reloadFlag标志是否需要重新加载,根据的值进行加载页面(即刷新页面)

mounted(){
const _that = this;
 this.onPageVisibility({
      show: function () {
        if (_that.reloadFlag == true) {
          location.reload();
        }
      },
      hide: function () {
        _that.reloadFlag = true;
      },
    });

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值