Vue.js的I18n命名格式化如何插入带href属性的超链接

问题根因 #

• Vue默认的模板插值语法{{ }}会自动转义所有HTML内容，避免XSS安全风险，因此你传入的a标签代码会被当作纯文本渲染，不会被解析为可点击的链接。

解决方案 #

方案1：使用v-html指令 #

仅适用于链接内容完全可信、无用户可控输入的场景：

1. 原JSON翻译配置无需修改：

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

2. 模板部分改用v-html渲染翻译结果：

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

注意：如果链接包含用户提交的内容，禁止使用该方案，否则存在XSS注入风险。

方案2：使用Vue I18n组件插值（官方推荐） #

完全规避XSS风险，更安全：

1. JSON翻译配置保留占位符即可：

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

2. 模板中使用对应i18n组件渲染：
   如果是Vue3搭配Vue I18n v9+，写法如下：

<i18n-t keypath="Message.link.text" tag="div">
  <template #url>
    <a href="https://www.google.com/" target="_blank">www.google.com</a>
  </template>
</i18n-t>

如果是Vue2搭配旧版Vue I18n，写法如下：

<i18n path="Message.link.text" tag="div">
  <a slot="url" href="https://www.google.com/" target="_blank">www.google.com</a>
</i18n>

内容的提问来源于stack exchange，提问作者petterandersson