Nuxt3中使用navigateTo切换语言后中间件内i18n.locale未更新

问题分析 #

当前路由中间件仅在检测到用户所选语言与i18n.locale不一致时，通过navigateTo跳转到对应语言路径，但跳转后i18n.locale并未同步更新，导致中间件重复触发跳转逻辑，陷入无限循环。

手动输入默认语言路径/test时，Nuxt i18n会自动解析路径并将i18n.locale设置为ar（默认语言），但通过中间件跳转时不会触发这一自动同步逻辑。

解决方案 #

修改中间件，在跳转前主动同步i18n.locale的值，并添加条件判断避免重复触发跳转：

export default defineNuxtRouteMiddleware(async (to) => {
  const userLangSelect = 'ar'; // 实际场景从用户设置/本地存储/API获取
  const nuxt = useNuxtApp();
  const localePath = useLocalePath();
  const i18n = nuxt.$i18n;
  const route = useRoute();

  // 获取当前路由对应的locale（路径中无locale参数时使用默认值）
  const currentRouteLocale = route.params.locale || i18n.defaultLocale;

  // 若目标路径已是用户所选语言，同步更新locale后直接返回
  if (currentRouteLocale === userLangSelect) {
    if (i18n.locale.value !== userLangSelect) {
      i18n.locale.value = userLangSelect;
    }
    return;
  }

  // 语言不匹配时，先更新locale再跳转
  i18n.locale.value = userLangSelect;
  const targetPath = localePath(to.fullPath, userLangSelect);
  return navigateTo(targetPath);
});

关键修复点 #

1. 主动同步locale：在跳转前设置i18n.locale.value = userLangSelect，确保中间件下次执行时检测到语言匹配，不会重复触发跳转。
2. 提前判断目标路径语言：通过route.params.locale获取当前路由的语言参数，避免对已符合要求的路径执行冗余操作。

补充说明 #

• 若用户语言来自异步数据源（如API），需在中间件中等待数据获取完成后再进行判断，否则会因值未初始化导致逻辑错误。
• 依赖Nuxt i18n的useLocalePath生成正确的语言路径，确保跳转目标符合路由规则。

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