Svelte中goto函数无法跳转至根路径的问题求助

API 探路者

2026-7-28

问题分析与解决方案

核心问题出在表单的默认提交行为干扰了goto的执行。你的登录按钮嵌套在<form>标签内，点击按钮时会触发表单默认提交动作，该动作会和goto的路由跳转逻辑冲突，导致根路径的跳转被中断（其他路径因路由匹配逻辑差异未受影响）。同时，手动订阅Store的写法也可优化为更简洁可靠的自动订阅语法。

具体修复步骤

1. 阻止表单默认提交行为

给表单添加on:submit|preventDefault修饰符，彻底禁用默认提交动作：

<form on:submit|preventDefault>
    <button on:click={() => login("", "")}>Login</button>
    <a href="/">test</a>
</form>

或者直接在按钮点击事件上阻止默认行为：

<button on:click|preventDefault={() => login("", "")}>Login</button>

2. 简化Store订阅逻辑

使用Svelte原生的自动订阅语法$isAuthenticated代替手动订阅，代码更简洁且不易出错：

<script>
    import { goto } from "$app/navigation";
    import { isAuthenticated, login } from "./auth";

    $: if ($isAuthenticated) {
        console.log("here");
        goto("/");
    }
</script>

3. 可选：确保跳转时机正确

如果上述操作后仍有问题，可通过nextTick确保DOM更新完成后再执行跳转：

<script>
    import { goto } from "$app/navigation";
    import { isAuthenticated, login } from "./auth";
    import { nextTick } from 'svelte';

    $: if ($isAuthenticated) {
        console.log("here");
        await nextTick();
        goto("/");
    }
</script>