Vue-i18n：如何为格式化变量设置默认值以省略传参？

你可以通过两种方式实现无需传入参数就能使用默认值的需求：

方法一：直接在消息定义中指定默认值 #

Vue-i18n支持在占位符语法里直接设置默认值，格式为{占位符=默认值}。修改你的国际化配置如下：

const messages = {
  en: {
    message: {
      hello: '{msg="hello"} world'
    }
  }
}

之后直接调用$t('message.hello')就能得到hello world，无需传入第二个参数。如果需要覆盖默认值，依然可以正常传参：$t('message.hello', { msg: 'hi' })会输出hi world。

方法二：包装$t函数实现全局默认值 #

如果需要对多个占位符统一设置默认逻辑，或者默认值需要动态生成，可以包装原有的$t方法：

在Vue项目的入口文件（比如main.js）中添加如下代码：

// 假设已经初始化好了i18n实例
import i18n from './i18n'

// 保存原有的$t方法
const originalT = i18n.global.t

// 包装新的t方法，注入默认参数
i18n.global.t = function (key, options = {}) {
  // 为指定key设置默认值
  if (key === 'message.hello') {
    options = { msg: 'hello', ...options }
  }
  // 这里可以添加更多key的默认值逻辑
  return originalT.call(this, key, options)
}

这样在模板中直接调用$t('message.hello')就会自动使用默认的msg值，同时也支持传入参数覆盖默认值。

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