Vue中在mounted钩子实现页面仅刷新一次的问题

你遇到的无限循环问题太常见了——每次location.reload()触发页面刷新后，Vue组件会重新初始化，mounted钩子又会再次执行，于是就陷入了死循环。下面给你两个可靠的解决方案，帮你实现"仅在首次访问时刷新一次"的需求：

方案一：使用SessionStorage标记刷新状态 #

SessionStorage是会话级的存储，页面关闭后会自动清除，非常适合这种单次场景。我们可以用它来记录页面是否已经完成过刷新：

mounted() {
  // 从sessionStorage读取刷新标记
  const hasReloaded = sessionStorage.getItem('hasPageReloaded');
  
  if (!hasReloaded) {
    // 先标记"即将刷新"，避免循环
    sessionStorage.setItem('hasPageReloaded', 'true');
    // 执行页面刷新
    window.location.reload();
  } else {
    // 刷新完成后移除标记，避免下次打开页面时残留
    sessionStorage.removeItem('hasPageReloaded');
  }
}

这个方案的优势在于：

• 关闭浏览器标签后标记自动消失，下次打开页面会重新执行一次刷新
• 不会污染全局变量，仅在当前会话有效

方案二：使用URL查询参数做标记 #

如果你不想依赖存储，也可以通过URL参数来判断是否已经刷新过：

mounted() {
  // 解析当前URL的查询参数
  const urlParams = new URLSearchParams(window.location.search);
  const hasReloaded = urlParams.has('reloaded');
  
  if (!hasReloaded) {
    // 构造带标记参数的新URL
    const newUrl = `${window.location.origin}${window.location.pathname}?reloaded=1`;
    // 用replace替换当前历史记录，避免地址栏残留参数（可选）
    window.location.replace(newUrl);
  }
}

这里用window.location.replace()而不是直接reload()的原因是：它会替换当前的历史记录条目，用户点击回退时不会看到带?reloaded=1的页面，体验更友好。如果不介意地址栏显示参数，也可以直接用window.location.href = newUrl。

额外注意事项 #

• 开发环境下，Vue的热重载可能会干扰测试，建议在生产环境或者关闭热重载后验证效果
• 如果你使用Vue Router，要注意避免在路由切换时误触发刷新逻辑，可以结合路由守卫做额外判断
• 不要用localStorage替代sessionStorage，因为localStorage是持久化存储，标记会一直保留到用户手动清除，不符合"仅首次访问刷新"的需求

内容的提问来源于stack exchange，提问作者Joey