SvelteKit中goto函数无法跳转至已存在页面问题求助

问题复现 #

• 已创建/login页面，手动输入URL可正常访问
• 注册页面提交后调用封装的routeToPage跳转/login，无报错但URL未变化
• 调用routeToPage跳转不存在的页面时，URL会变化并触发报错

可能的原因及解决方法 #

1. 表单默认提交行为打断跳转

如果handleSubmit绑定在表单的submit事件上，浏览器默认的页面刷新行为会中断goto的客户端路由跳转。

解决方式：
在表单上直接阻止默认行为：

<form on:submit|preventDefault={handleSubmit}>
  <!-- 表单输入框 -->
  <button type="submit">完成注册</button>
</form>

或者在函数内手动阻止：

function handleSubmit(event: Event) {
  event.preventDefault();
  
  console.log("Email:", email);
  console.log("Password:", password);
  console.log("Confirm Password:", confirmPassword);
  
  // 注册逻辑
  routeToPage("login", true);
}

2. 模块脚本中使用goto的限制

$app/navigation的goto是客户端专属API，而context="module"脚本会在服务端和客户端同时执行，可能导致客户端跳转逻辑失效。

解决方式：
修改跳转函数，确保仅在客户端执行：

<!-- goto.svelte 调整脚本 -->
<script lang="ts">
  import { goto } from "$app/navigation";
  import { browser } from "$app/environment";

  export function routeToPage(route: string, replaceState: boolean) {
    if (browser) { // 仅在浏览器环境执行跳转
      goto(`/${route}`, { replaceState });
    }
  }
</script>

3. 路由文件命名或路径错误

确认/login对应的路由文件存在且命名正确：

• 检查src/routes/login/+page.svelte是否存在
• 注意路径大小写（SvelteKit路由默认区分大小写，除非配置了caseInsensitive）

4. 异步注册逻辑未等待完成

如果注册逻辑是异步操作（比如调用后端API），需等待异步操作完成后再执行跳转：

async function handleSubmit(event: Event) {
  event.preventDefault();
  
  try {
    // 示例：异步注册请求
    await fetch("/api/register", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ email, password })
    });
    routeToPage("login", true); // 注册成功后跳转
  } catch (err) {
    console.error("注册失败", err);
  }
}

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