时间戳

首页 > 解决方案 > 将带 href 的超链接添加到命名格式 I18n vuejs

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

问题描述

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

这不起作用，它会显示{{ $t("Message.link.text", { Url: www.google.com }) }}在 UI 中。

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

标签： jsonvue.jshrefvue-i18n

解决方案

您不能{{ }}在 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>

推荐阅读