nuxt i18n路由不适用于子页面

Question

我已经更改了我的应用程序，使其可以与nuxt i18n一起使用，并且当我直接访问路线时，翻译似乎可以正常工作。

例如http://localhost:3000/fr/step/1

我的应用程序具有以下结构，每个步骤都是一页，其中包含不同的组件。

我的nuxt配置：

在文档中说我需要为我的nuxt链接添加localePath才能使其与i18n插件一起使用。 https://nuxt-community.github.io/nuxt-i18n/basic-usage.html#nuxt-link

例如：

<nuxt-link to="localePath('about')">About</nuxt-link>

在我的应用中，我曾经以编程方式导航至下一步：

this.$router.push({ path: `step/${this.currentStep + 1}` });

现在我有两个问题（问题）：

1. 如何使用localePath以编程方式导航至路线？例如this.localePath('step/2')不起作用。它总是重定向到首页。
2. 为什么它不能使用模板中的普通链接？我已经测试过：
   <nuxt-link :to="localePath('step/2')">Foo</nuxt-link>，但它也无法正常工作。当我尝试类似
   <nuxt-link :to="localePath('success')">Foo</nuxt-link>之类的方法时，它会起作用，因为success页面位于第一级。

似乎路由或我处理子页面的方式有问题。有人可以帮我吗？

Answer 1

以下为我工作。我有这样的Nuxt页面结构。

/pages/settings/car-form.vue

这是带有工作localePath()的Nuxt链接到此子页面。请注意下面路径中的斜杠。

<nuxt-link :to="localePath({ name: 'settings-car-form' })">Car form</nuxt-link>

作为Nuxt docs suggest：您必须链接到（Nuxt）路由name。 路径中的斜线变为破折号。请参见documentation page上的routes数组。

您可以在Nuxt生成的name-文件中查找项目的Nuxt路由的.nuxt/routes.json。他们会在__en属性中添加带有后缀__de（对于英语或name，对于德语）的路线。将上面的localePath()指向没有后缀__en的名称（就像上面的示例一样）。

Answer 2

好吧，以为我找到了解决问题的方法，但是我不确定这是否是正确的解决方法：

要以当前语言环境切换路线，这对我有效：

this.$router.push({ path: this.localePath({ path: `step/${this.currentStep + 1}` }) });

在模板中可以使用：

<nuxt-link
  :to="localePath({ path: `step/${currentStep + 1}` })">
  Next step
</nuxt-link>