SvelteKit路由拦截静态资源：如何触发默认浏览器行为？

我有一个路径为/src/routes/[first]/[[second]]/+page.ts的动态路由，目前运行正常。但/static/attachments/image1.jpg这类静态资源无法通过锚点标签正常访问：点击<a href="/attachments/image1.jpg">Download the picture</a>时，浏览器会触发该动态路由的逻辑，而非直接下载资源。奇怪的是，<img src="/attachments/image1.jpg">这类图片标签能正常加载资源，说明路径本身是有效的，只是需要让SvelteKit对锚点标签的请求做和图片标签一样的处理。

已知通过import导入资源是理想方案，但锚点标签是通过{@html post.content}自动生成的，必须使用静态资源路径。请问是否存在类似throw redirect()的方法，让这类URL被当作静态资源处理？

方法1：通过服务器钩子拦截静态资源请求 #

在src/hooks.server.ts中添加请求处理逻辑，匹配静态资源路径并直接返回文件响应，绕过动态路由：

import type { Handle } from '@sveltejs/kit';
import { createReadStream } from 'fs';
import { stat } from 'fs/promises';
import { join } from 'path';

export const handle: Handle = async ({ event, resolve }) => {
  const path = event.url.pathname;
  // 匹配你的静态资源前缀，比如/attachments/
  if (path.startsWith('/attachments/')) {
    const filePath = join(process.cwd(), 'static', path.slice(1));
    try {
      const fileStats = await stat(filePath);
      if (fileStats.isFile()) {
        // 根据文件类型设置正确的Content-Type，这里示例用通用二进制类型
        return new Response(createReadStream(filePath), {
          headers: {
            'Content-Type': 'application/octet-stream',
            'Content-Length': fileStats.size.toString()
          }
        });
      }
    } catch (err) {
      // 文件不存在时，继续走正常路由流程
    }
  }
  return resolve(event);
};

方法2：阻止客户端路由拦截静态资源锚点 #

由于问题根源是SvelteKit客户端路由拦截了a标签的点击事件，可在全局布局中添加逻辑，让匹配静态资源路径的a标签直接走浏览器原生跳转：

<!-- src/routes/+layout.svelte -->
<script>
  function handleAnchorClick(e) {
    const anchor = e.target.closest('a');
    if (!anchor) return;
    
    const isStaticAsset = anchor.href.startsWith(`${window.location.origin}/attachments/`);
    if (isStaticAsset) {
      e.preventDefault();
      window.location.href = anchor.href;
    }
  }
</script>

<svelte:body on:click={handleAnchorClick} />

<slot />

补充说明 #

图片标签能正常加载的原因是：图片的src请求是浏览器直接发起的资源请求，不会被SvelteKit的客户端路由拦截；而a标签的点击事件会被客户端路由捕获，当作页面导航请求处理，因此会匹配到你的兜底动态路由。

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