SvelteKit：如何对同域名下部分<a>链接禁用内部路由跳转

Svelte（默认基于SvelteKit路由体系）会自动拦截同源域名下的所有a标签点击，走客户端内部路由渲染，所以指向反向代理路径的同域链接会被误拦截。你可以通过以下几种方法实现需求：

方法1：添加rel="external"属性 #

这是最通用的方案，SvelteKit识别到该属性后会直接跳过客户端路由逻辑，交给浏览器原生处理链接跳转：

<!-- /docs/ 由反向代理提供，不属于Svelte应用部分 -->
<a href="https://tradingstrategy.ai/docs/index.html" rel="external">Documentation</a>

方法2：添加data-sveltekit-reload属性 #

该属性是SvelteKit专为同源下需要整页重载的场景设计的，比rel="external"更贴合同域反向代理的使用场景：

<!-- /docs/ 由反向代理提供，不属于Svelte应用部分 -->
<a href="https://tradingstrategy.ai/docs/index.html" data-sveltekit-reload>Documentation</a>

方法3：全局批量处理同类路径 #

如果你有大量指向/docs/路径的链接，不想逐个添加属性，可以在根布局文件中统一拦截处理：

<!-- 根布局文件 +layout.svelte -->
<script>
  function interceptDocLinks(e) {
    const targetLink = e.target.closest('a');
    // 匹配所有同域下/docs开头的链接
    if (targetLink?.origin === window.location.origin && targetLink?.pathname.startsWith('/docs/')) {
      // 阻止路由捕获事件，直接交由浏览器原生处理
      e.stopPropagation();
    }
  }
</script>

<svelte:body on:click={interceptDocLinks} />
<slot />

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