vue.js - nuxt i18n 路由不适用于子页面

Question

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

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

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

我的 nuxt 配置：

在文档中它说我需要localePath为我的 nuxt-links 添加以使其与 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

这是该子页面的 Nuxt 链接，其中localePath(). 请注意路径下方缺少的斜线。

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

正如Nuxt 文档所建议的那样：您必须链接到 (Nuxt) 路线name。路径中的斜线变成破折号。请参阅文档页面routes上的数组。

您可以name在 Nuxt 生成的文件中查找项目的 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>