如何让i18n与SvelteKit在<a href>导航时正常工作？

你遇到的核心问题是导航链接没有自动携带当前路由的lang参数，且使用相对路径时会在子页面中重复叠加路径。以下是具体解决方法：

核心修复思路 #

1. 借助SvelteKit的$page store获取当前路由中的lang参数
2. 动态生成包含lang的完整路由路径，避免硬编码或相对路径导致的错误

具体代码修改 #

步骤1：引入必要的Store与工具 #

在导航组件的<script>部分添加：

<script>
    import { page } from '$app/stores';
    import { generateUrl } from '$app/navigation';
    import { menu_items } from './你的菜单文件路径';
</script>

步骤2：重构导航链接生成逻辑 #

替换原有的循环代码，动态生成带lang参数的正确路径：

<section class="[&>.router-link-exact-active]:bg-secondary hidden items-center gap-1 text-sm font-bold uppercase md:flex">
    {#each menu_items as { url: path, id, text } (id)}
        <a
            href={generateUrl(path, { lang: $page.params.lang || 'en' })}
            class="hover:bg-secondary px-3 py-[2px] transition-all duration-500"
        >
            {$LL.nav_bar[text]()}
        </a>
    {/each}
</section>

步骤3：处理默认语言（可选） #

如果你的应用有默认语言（比如en），可以在$page.params.lang不存在时自动填充默认值，确保首页直接跳转到/en而非根路径/。

为什么之前的trailingslash配置无效？ #

trailingslash仅控制路径末尾是否添加斜杠，无法解决缺少lang参数和相对路径叠加的核心问题，必须通过动态生成完整路由路径来彻底修复。

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