i18n.locale 在 navigatorTo() 到另一个语言之后不会在中间件中更新 - nuxt 3

Question

中间件有一个功能，如果用户选择的语言与当前语言不同，则更改语言。但问题是，在用户切换到预期路径或 URL（采用另一种语言）后，

i18n.locale

仍与路径或 URL 更改之前的第一个值相同。

语言：

阿拉伯语

ar

-（默认）

英语

en

页码：

测试.vue

路径：

/测试

/en/测试

中间件：

让我假设有一个变量（取决于用户的语言），但为了简单起见，我将使用字符串：

const userLangSelect = 'ar';

 export default defineNuxtRouteMiddleware(async (to) => {
  const userLangSelect = 'ar'; // Get it from the user, but for simplicity I chose string
  const nuxt = useNuxtApp();
  const localePath = useLocalePath();
  const i18n = nuxt.$i18n;

  if(i18n.locale.value !== userLangSelect) {
   console.log(to.fullPath,i18n.locale.value);
   return navigateTo(localePath(to.fullPath, userLangSelect)) // to path same lang user;
  }
 });

当你输入

/en/test

时，你会被引导到

/test

，这里会进入无限循环，因为

i18n.locale.value

的值没有改变，但是用户被引导到

/test

。

控制台.log：

知道当您手动输入路径

/test

时（即通过浏览器输入路径 /test 并按 Enter 键），

i18n.locale.value

的值将变为

ar

Answer 1

我知道一个可行的解决方案，但我不知道。我认为有更好的解决方案，

export default defineNuxtRouteMiddleware(async (to) => {
  const userLangSelect = 'ar';
  const nuxt = useNuxtApp();
  const localePath = useLocalePath();
  const i18n = nuxt.$i18n;
  
  if(i18n.locale.value !== userLangSelect) {
   console.log(to.fullPath,i18n.locale.value);
   i18n.setLocale(userLangSelect); // <======
   return navigateTo(localePath(to.fullPath, userLangSelect)) 
  }
});