nuxt i18n 路由不适用于子页面

Question

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

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

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

我的nuxt配置：

在文档中，它说我需要localePath为我的 nuxt-link添加它以使其与 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}` });

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

我将如何以编程方式导航到路线localePath？例如this.localePath('step/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(). 请注意路径中下方缺少的斜线。

/pages/settings/car-form.vue

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

您可以name在 Nuxt 生成的.nuxt/routes.json文件中查找项目的 Nuxt 路由。您会发现您的路线带有添加到属性中的__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>