Svelte 5 + SvelteKit：如何在每次URL加载时执行代码块？

问题1：{#key}配合use:init的方式是否为最佳实践？ #

不是。这种方式存在两个核心问题：

• 场景偏离：use:指令的设计初衷是处理DOM元素的初始化、绑定或清理逻辑，而你的需求是响应路由参数变化执行业务逻辑，属于组件状态/路由层面的逻辑，用指令实现可读性和可维护性差，属于误用场景。
• 性能开销：{#key}会强制销毁并重建其包裹的DOM结构和组件实例，哪怕内部内容不需要完全重建，这会带来不必要的性能损耗，尤其是页面包含复杂DOM时。

问题2：推荐的实现方式 #

针对动态路由参数变化时执行代码的需求，推荐以下几种更贴合Svelte/SvelteKit设计的方案：

方案1：使用Svelte 5的$effect.pre监听路由参数 #

Svelte 5的$effect.pre会自动追踪依赖，当路由参数（或data中的addressID）变化时触发逻辑，无需额外的DOM操作：

<script>
  export let data; // 来自+page.js/load的返回值

  // 每次addressID变化时执行
  $effect.pre(() => {
    // 这里写你的业务逻辑
    console.log(`加载地址详情: ${data.addressID}`);

    // 可选：返回清理函数，在参数变化前执行（比如取消请求、清理定时器）
    return () => {
      console.log(`清理地址${data.addressID}的相关资源`);
    };
  });
</script>

如果你的逻辑需要等待DOM渲染完成后执行，把$effect.pre换成$effect即可（$effect在DOM更新后触发）。

方案2：监听$page store的路由参数 #

直接通过SvelteKit提供的$page store获取路由参数，监听其变化：

<script>
  import { page } from '$app/stores';

  $effect.pre(() => {
    const addressId = $page.params.id;
    console.log(`当前地址ID: ${addressId}`);
    // 执行你的初始化逻辑
  });
</script>

这种方式不需要依赖data对象，直接从路由获取参数，适合参数无需提前加载数据的场景。

方案3：在load函数中处理（适合服务端/通用逻辑） #

如果你的代码需要在页面数据加载阶段执行（比如预加载资源、初始化服务端相关逻辑），可以直接写在+page.js或+page.server.js的load函数里：

// +page.js
export async function load({ params }) {
  const addressId = params.id;
  // 这里写每次路由变化要执行的逻辑（比如获取地址数据）
  const addressData = await fetchAddress(addressId);

  return { addressId, addressData };
}

注意：load函数会在服务端（SSR时）和客户端导航时执行，适合通用逻辑；纯客户端交互逻辑还是放在组件的$effect中更合适。

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