nuxti18n 动态路由参数

Question

我正在创建一个博客。 我创建了一个动态页面 [blog] .vue。 此时，对于每个页面，我都使用

useAsyncData

获取数据。 到目前为止一切正常。

但是，我需要每篇文章与其相应的语言相关联（带有翻译的 url）。 问题来了

此时

nuxt.config.ts

我设置

i18n: {
 dynamicRouteParams: true,
},

好的，现在作为 [body].vue 中的文档（https://v8.i18n.nuxtjs.org/options/routing#dynamicrouteparams）我已经设置了

definePageMeta({
  nuxtI18n: {
    en: { id: 'my-post' },
    fr: { id: 'mon-article' }
  }
})

问题是

definePageMeta

是一个编译器宏因此，页面元对象不能引用组件（或组件上定义的值）。 （https://nuxt.com/docs/guide/directory-structure/pages/#page-metadata）

这意味着我不能像这样改变dinamically nuxtI18n对象

const data= await useAsyncData(...)

definePageMeta({
  nuxtI18n: {
    en: { 
      blog: data.alternate_languages.en.url
    },
    fr: { 
      blog: data.alternate_languages.fr.url
    }
  }
})

至此

dynamicRouteParams:true

没用，我没办法翻译一篇文章

Answer 1

我用来解决这个问题的一个可能的解决方案是像这样直接传递给

route.meta

：

route.meta.nuxtI18n = slugs

不幸的是，不可能动态改变

definePageMeta

值。

作为参考，本期讨论了这个特定主题：https://github.com/nuxt-modules/i18n/issues/1736