将带 href 的超链接添加到命名格式 I18n vuejs

Question

我查看了此页面上的 vue 文档，了解如何解决此问题：https://kazupon.github.io/vue-i18n/guide/formatting.html#named-formatting

我认为我的所有语法都是正确的，并且我已经使用 href 代码尝试了许多不同的场景。

这是我的 json 文件中的英文翻译文件：

"link": {
  "text": "Click this {Url} link."
}

这是我的模板：

 {{ $t("Message.link.text", { Url: <a href="https://www.google.com/" target="_blank">www.google.com</a> }) }}

这不起作用，它会在 UI 中显示

{{ $t("Message.link.text", { Url: www.google.com }) }}

。

感谢我能得到的所有帮助，提前致谢！

Answer 1

在 Vue 中无法使用插值（

{{ }}

语法）输出 HTML。您可以使用

v-html

来实现此目的，但这很危险（请参阅文档中的警告）

使用分量插值代替：

"link": {
  "text": "Click this {url}.",
  "link": "link",
}

模板：

  <i18n path="Message.link.text" tag="p">
    <template v-slot:url>
      <a href="https://www.google.com/" target="_blank">{{ $t('Message.link.link') }}</a>
    </template>
  </i18n>

Answer 2

根据最新版本的 vue-i18n 中明显的 API 差异，为 Michal 的答案提供更新的答案（参见文档）。这主要适用于使用 Vue-3 和当前 vue-i18n 实现 (9.8.0) 的任何人。

这对我有用，而“链接”作为对象却没有：

"link.text": "Click this {url}.",
"link.link": "link"

然后（注意 i18n-t 和 keypath）：

<i18n-t
  keypath="link.text"
  tag="p"
>
  <template #url>
    <a
      :href="https://www.google.com/"
      target="_blank"
    >
      {{ $t('link.link') }}
    </a>
  </template>
</i18n-t>