在 Nuxt3 中使用 i18n 翻译 slug 页面时出现问题

Question

我正在尝试翻译pages/post/[slug].vue url。目前它转到 localhost/post/slug，但当我设置不同的语言（爱沙尼亚语）时，我希望它是 localhost/postitus/slug。

Nuxt3定义I18nRoute在pages/favorites/index.vue中工作，当我设置了et语言环境时，它会转到localhost/lemmikud并且工作正常

<template>
  <div class="content">
    <div>
        <h1>Minu lemmikud</h1>   
    </div>
  </div>
</template>

<script setup>
defineI18nRoute({
  paths: {
    et: "/lemmikud",
  },
});
</script>

但是这在pages/post/[slug].vue 中不起作用。当我到达 localhost/postitus/slug 时，它给了我 404 错误。

<script setup>
defineI18nRoute({
  paths: {
    et: "/postitus",
    en: "/post",
  },
});
</script>

有人知道如何翻译 slugs 的 url 吗？干杯！

Answer 1

我通过阅读一些 i18n 文档解决了这个问题 https://v8.i18n.nuxtjs.org/guide/custom-paths

所以我需要做的是在我的nuxt.config.ts中添加带有pages属性的customRoutes。

 i18n: {
    locales: [
      {
        code: "et",
        name: "Estonian",
        file: "et.json",
      },
      {
        code: "en",
        name: "English",
        file: "en.json",
      },
    ],
    defaultLocale: "et",
    langDir: "./locales/",
    config: {
      fallbackLocale: "et",
    },
    //These lines below will translate my post/slug to postitus/slug    
    customRoutes: 'config',
    pages: {
      'post/[slug]': {
        et: '/postitus/[slug]', 
        en: '/post/[slug]', 
      }
    }
  },