vue实现在进入页面之前自动刷新一次页面(适用于首次进入页面空白,刷新才显示的问题)

有时候会莫名出现一个问题,首次进入页面的时候空白,刷新才会显示,如果实在排查不到原因,以及如何解决,那就直接在进入页面之前去自动执行一次刷新操作,实现方法如下

<script setup>
import {onBeforeUnmount} from "vue";

onBeforeMount(() => {
  // 检查本地存储中是否已经执行过刷新操作
  const hasRefreshed = localStorage.getItem('hasRefreshed');
  // 如果本地存储中没有记录或者记录为false,则执行刷新操作
  if (!hasRefreshed) {
    // 执行刷新操作
    window.location.reload();
    // 设置本地存储,标记已经执行过刷新操作
    localStorage.setItem('hasRefreshed', true);
  }
})

// 在组件销毁时清除存储,下次进入才会触发
onBeforeUnmount(() => {
  localStorage.removeItem('hasRefreshed');
});

</script>

此方法不仅仅适用于vue,只要是js都可以使用
ps:如果不通过localStorage记录,会导致无限刷新页面

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值