Vue i18n中如何通过参数实现关联本地化消息的动态键？

你想要的是Vue I18n里的动态链接本地化消息功能，只是之前的语法细节没调整对。我来给你梳理正确的实现方式：

正确的本地化文件写法 #

把消息里的链接语法改成带括号的形式，这样Vue I18n才能正确识别并解析动态的keypath：

{
  "text": "I want to learn @:(langs.{lang})",
  "langs": {
    "es": "Spanish",
    "en": "English",
    "it": "Italian"
  }
}

调用方式 #

你原本的调用代码完全没问题：

$t('text', { lang: 'es' })

执行后就能得到你想要的结果：I want to learn Spanish

为什么之前会报错？ #

之前你用的@:langs.{lang}写法，Vue I18n会把langs.{lang}当成一个静态的固定keypath去查找，自然找不到对应的本地化条目，所以会触发编译或解析错误。而加上括号@:(langs.{lang})后，Vue I18n就明白这里的{lang}是一个参数，会先把传入的参数值替换进去，再去查找对应的消息内容。

补充说明 #

不管你用的是Vue 2配套的Vue I18n v8，还是Vue 3的Vue I18n v9+，这个语法都能正常工作。如果之后有更深层级的嵌套需求，比如@:(categories.{type}.label)这类结构，也可以用同样的逻辑实现动态关联。

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