Nuxt $i18n切换语言后跳转页面自动恢复为默认语言该如何解决？

核心原因 #

• 配置未开启用户语言选择的持久化存储，Nuxt i18n默认开启的浏览器语言检测会在每次路由跳转时重新检测浏览器偏好，覆盖用户手动切换的语言
• 未显式指定路由匹配策略，默认规则要求非默认语言的路由必须携带对应语言前缀，使用原生跳转方式（普通a标签、原生$router.push）未携带前缀时，会自动匹配到默认语言的路由，触发语言重置
• 切换语言时直接修改$i18n.locale而未调用Nuxt i18n提供的setLocale方法，框架层未同步更新路由和状态，跳转后状态直接丢失

修复步骤 #

1. 调整i18n配置，补充路由策略、持久化和浏览器检测规则，同时修正原配置中错误的德语ISO代码：

i18n: {
  locales: [
    { code: 'en', iso: 'en-US', dir: 'ltr' },
    { code: 'de', iso: 'de-DE', dir: 'ltr' } // 原配置de-GER为非标准ISO代码，修正为de-DE
  ],
  defaultLocale: 'de',
  // 新增以下配置
  strategy: 'prefix_except_default', // 显式声明路由策略：默认语言路径无前缀，其他语言带对应code前缀
  detectBrowserLanguage: {
    useCookie: true, // 开启cookie存储用户选择的语言，优先级高于浏览器检测
    cookieKey: 'i18n_locale',
    redirectOn: 'root', // 仅访问站点根路径时才触发浏览器语言检测，避免每次跳转覆盖用户选择
    alwaysRedirect: false
  },
  vueI18n: {
    fallbackLocale: 'de',
    messages: {
      en: en.messages,
      de: de.messages
    }
  }
},

2. 统一使用Nuxt i18n提供的跳转能力，避免原生跳转丢失语言参数：

• 模板内跳转使用<NuxtLink>组件，无需手动拼接语言前缀，组件会自动适配当前选中的语言
• 逻辑层跳转使用useLocalePath/switchLocalePath组合式方法，不要直接调用原生$router.push

3. 修正语言切换逻辑，必须调用setLocale方法同步框架状态：

// 正确示例（Nuxt3写法）
const { setLocale } = useI18n()
await setLocale('en') // 切换后会自动同步路由、cookie等状态

// 禁止直接修改locale属性，不会触发框架状态同步
// $i18n.locale = 'en'

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