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

最新推荐文章于 2024-05-03 11:47:20 发布

艺逸&福兜

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量758

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/lxuanz/article/details/128134904

版权

问题描述见图：

在这里插入图片描述

解决办法：

主要监听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;
      },
    });

}