Nuxt i18n 在语言切换时重置数据对象

Question

我一直在将nuxt-i18n集成到我的一个项目中以启用多种语言。一切正常，但是当我在填写表单时切换语言时，页面中的所有数据都丢失了。

因此，我创建了一个表单并用于v-model将数据绑定到页面的数据对象。

<div class="form-group">
   <label for="username">{{ $t('form.username') }}</label>
   <input v-model="user.username" type="username" class="form-control" id="username" />
</div>

这是页面的数据对象

data: () => {
  return {
     user: {
       username: ''
    }
}

因此，当我在字段中输入用户名时，模型会更新，正如我所期望的。但是，一旦我从该页面切换语言，一旦设置了所选语言，数据就会丢失。

这就是我在单击时切换语言的方式，例如，荷兰国旗图标。

switchLocalePath(locale.code) // local.code is 'nl' in this case

当用户切换语言时，slug 也应该更新。下面的代码显示了i18n我的nuxt.config.js文件中包的设置。

modules: [
    ['nuxt-i18n', {
      locales: [
        {
          code: 'en',
          iso: 'en-US',
          name: 'English'
        },
        {
          code: 'nl',
          iso: 'nl-NL',
          name: 'Nederlands'
        }
      ],
      defaultLocale: 'nl',
      parsePages: false,
      pages: {
        'account/register': {
            en: '/account/register',
            nl: '/account/registreren'
        },
        'account/index': {
            en: '/account/login',
            nl: '/account/inloggen'
        }
      },
      vueI18n: {
        fallbackLocale: 'nl',
        messages: { nl, en }
      }
    }],
]

实际问题

所以几乎一切都按我的预期工作。但是每次我更改语言时，页面的数据对象都会被清除（看起来页面实际上并没有重新加载）。因此，当填写表格，然后在提交前更改语言时，所有数据都会丢失。

如果可能，我如何确保在切换语言时所有数据都存在？

提前致谢！

Answer 1

我使用此方法来更改区域设置并发生相同的行为。

<v-list>
    <v-list-item
        v-for="locale in availableLocales"
        :key="locale.code"
        @click="$router.push(switchLocalePath(locale.code))"
    >
        <v-list-item-title>{{ locale.name }}</v-list-item-title>
    </v-list-item>
</v-list>

也尝试使用$i18n.setLocale(locale.code)同样的事情发生。

不确定这是否应该是评论，但由于我还不能发表评论（需要 50 名代表），所以我将其发布为问题描述的扩展。