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

【问题标题】：Adding hyperlink with href to named formatting I18n vuejs将带 href 的超链接添加到命名格式 I18n vuejs
【发布时间】：2021-11-26 17:15:39
【问题描述】：

我查看了此页面上的 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 }) }}。

感谢我能得到的所有帮助，在此先感谢！

【问题讨论】：

标签： json vue.js href vue-i18n

【解决方案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>

【讨论】：