SvelteKit使用adapter-static后点击链接总是加载新页面，如何实现SPA行为？

针对你的情况，预渲染后点击链接仍整页刷新、无法触发SPA客户端导航，可从以下几个方面排查修复：

1. 明确启用CSR与Hydration #

虽然SvelteKit默认启用客户端渲染（CSR）和Hydration，但在根+layout.js中显式配置可避免意外禁用：

// src/routes/+layout.js
export const prerender = true;
export const trailingSlash = 'always';
export const csr = true;
export const hydrate = true;

2. 确保链接路径匹配末尾斜杠规则 #

你设置了trailingSlash: 'always'，所有预渲染页面的路径都会以斜杠结尾（如/about/）。如果页面中的链接未带末尾斜杠（如<a href="/about">），会触发301重定向，导致浏览器整页刷新。

• 修正链接为带末尾斜杠的格式：<a href="/about/">About</a>
• 也可在svelte.config.js全局统一配置末尾斜杠规则，确保路由生成的链接自动适配：

  // svelte.config.js
  const config = {
      kit: {
          adapter: adapterStatic(),
          trailingSlash: 'always', // 全局强制末尾斜杠
          // ...其他配置
      },
      extensions: ['.svelte', '.md'],
      // ...
  }
  

3. 排查是否意外禁用CSR #

检查所有+layout.js和+page.js文件，确保没有设置export const csr = false——该配置会让对应页面不加载客户端路由脚本，完全依赖静态HTML，无法实现SPA导航。

4. 验证预渲染产物的客户端脚本 #

构建完成后，查看build目录下的HTML文件，确认文件末尾包含SvelteKit的客户端启动脚本（类似<script type="module" src="/_app/start/xxx.js"></script>）。如果缺失，说明Hydration脚本未被注入，需检查prerender配置是否存在冲突。

5. 检查Markdown文件中的链接 #

如果你在mdsvex生成的Markdown页面中使用了链接，确保它们是相对路径或匹配预渲染规则的同域路径。SvelteKit会自动拦截同域<a>标签实现SPA导航，但路径不匹配时会触发整页刷新。

内容的提问来源于stack exchange，提问作者Peppe L-G