Astro页面切换时astro:page-load事件重复触发问题咨询

这是Astro视图过渡的核心机制导致的：

• Astro的视图过渡采用局部DOM替换的方式实现页面跳转，而非传统的全页面刷新。首次加载根页面时，整个HTML文档被解析，内联脚本会被浏览器执行一次；但通过锚点跳转时，Astro只会更新页面中需要过渡的内容区域（比如<main>标签或你指定的过渡容器），不会重新执行已经加载过的脚本——不管有没有is:inline指令，因为浏览器默认不会重复执行同一个脚本。

• astro:page-load事件是Astro专门为视图过渡设计的钩子：每次完成页面内容替换后都会触发这个事件，所以你注册的回调函数会在每次跳转后重复执行，这是它的预期行为。

如果你的目标是让脚本逻辑在每次页面跳转时都运行，不需要把逻辑放在顶层脚本里，直接把所有需要重复执行的代码移到astro:page-load的回调里就行，比如：

<script is:inline>
  // 只在首次加载执行的代码（如果需要）
  console.log("script executed (only once)");

  document.addEventListener("astro:page-load", () => {
    // 每次页面跳转后都要执行的逻辑
    console.log("page loaded (every time)");
    // 这里写你修改<a>元素的代码
  });
</script>

如果是不想让astro:page-load的回调重复执行，那可以在回调执行后移除事件监听：

<script is:inline>
  console.log("script executed");
  
  function handlePageLoad() {
    console.log("page loaded (only once)");
    // 执行完后移除监听
    document.removeEventListener("astro:page-load", handlePageLoad);
  }

  document.addEventListener("astro:page-load", handlePageLoad);
</script>

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