将带有 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，但它很危险（参见 the warnings in the docs）

改用Component interpolation：

"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>

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

Adding hyperlink with href to named formatting I18n vuejs

json

vue.js

href

vue-i18n