Svelte i18n切换路由时语言重置问题求助

这不是svelte-i18n的默认行为，问题根源在于两个关键点：

• 原生<a>标签跳转属于硬导航，会触发整个应用重新加载，app.svelte里的init方法会重新执行，而你固定设置了initialLocale: 'en'，所以每次刷新都会回到英文
• 当前切换语言的操作没有持久化用户选择，刷新后语言偏好会丢失

解决步骤： #

1. 持久化用户选择的语言
   修改语言切换函数，把选择的语言存到localStorage：

function setLanguage(lg?: Language) {
  const selectedLang = lg || Language.ENGLISH;
  locale.set(selectedLang);
  localStorage.setItem('preferred-language', selectedLang);
}

2. 初始化时读取持久化的语言
   修改app.svelte里的init配置，优先从localStorage取语言，兜底使用'en'：

register('en', () => import('./i18n/en.json'));
register('fr', () => import('./i18n/fr.json'));
register('it', () => import('./i18n/it.json'));

const savedLocale = localStorage.getItem('preferred-language') || 'en';
init({
  fallbackLocale: 'en',
  initialLocale: savedLocale,
})?.catch((e: Error) => console.error(e));

3. 用svelte-router的软导航代替硬跳转
   原生<a>标签会触发页面刷新，改用svelte-router-spa提供的push方法实现软导航，这样不会重新加载应用，语言状态也能保留：

<script>
  import { push } from 'svelte-router-spa';
  // ...其他业务代码
</script>

<button 
  on:click={() => push(link)}
  aria-label={$_('i18n.Button.MoreAbout', { default: 'More About', values: { subject } })}
>
  // ...按钮内容
</button>

如果一定要保留<a>标签样式，可以阻止默认跳转行为，手动调用push：

<a
  href={link}
  on:click={(e) => {
    e.preventDefault();
    push(link);
  }}
  aria-label={$_('i18n.Button.MoreAbout', { default: 'More About', values: { subject } })}
>
  // ...内容
</a>

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