Vue JS - 如何将路由 (:id) 转换为 i18N 翻译？

Question

想象一下这个 Vue JS 模板：

<template>
    <b-container>
      <b-row>
        <b-col>
          <div>
          {{$t("competence.*web-developer*.title1")}}
          </div>
        </b-col>
      </b-row>
  </b-container>
</template>

现在假设“web-developer”是路由 ID。

路线没问题。

const routes = [
{ path: '/competences/:id', name: Competences, component: Competences, props: true }

];

我的问题：如何将 {{this.$route.params.id}} 放入我的翻译中...

{{$t("competence.{{this.$route.params.id}}.title1")}}

我知道我做不到，但这是我正在努力实现的目标。处理翻译字符串中的动态值的最佳方式是什么？

谢谢！

Answer 1

您可以使用名称 attr 并使用国际化值填充路径参数在路由之间导航。这样你就可以在路径中传递任何东西。

Answer 2

您可以在模板中连接字符串。

{{$t("competence."+$route.params.id+".title1")}}

Vue JS - 如何将路由 (:id) 转换为 i18N 翻译？

Vue JS - How do I get a route (:id) into an i18N translation?

vue.js

vue-router

vue-i18n