Lzh on GitHub

运行时钩子

Nuxt i18n 模块提供了运行时钩子，你可以使用它们根据你的应用程序语言执行特定任务。

Nuxt i18n 模块 提供了运行时钩子，用于根据你的应用程序语言执行特定任务。

钩子

'i18n:beforeLocaleSwitch'

在应用程序语言环境切换之前调用，可以覆盖 newLocale 属性以更改正在切换到的语言环境。

参数:

  • oldLocale
    • 类型: string
    • 切换之前的应用程序语言环境
  • newLocale
    • 类型: string
    • 切换之后的应用程序语言环境
  • initialSetup
    • 类型: string
    • 如果是应用程序加载时触发的初始语言环境切换，则设置为 true。这是一个特殊情况，因为语言环境技术上尚未设置，因此我们正在从无语言环境切换到有语言环境。
  • context
    • 类型: NuxtApp
    • Nuxt 应用程序，此属性已弃用，可以在钩子范围之外使用 const context = useNuxtApp() 来实现相同的功能。

返回: string | null

'i18n:localeSwitched'

在应用程序语言环境切换之后立即调用。

参数:

  • oldLocale
    • 类型: string
    • 切换之前的应用程序语言环境
  • newLocale
    • 类型: string
    • 切换之后的应用程序语言环境

用法

典型的用法是通过插件定义这些回调，在插件中你可以访问应用程序的上下文（例如，如果你需要在语言更改时更改 Axios 的配置，这将非常有用）。

/plugins/i18n.ts
export default defineNuxtPlugin(nuxtApp => {
  // called right before setting a new locale
  nuxtApp.hook('i18n:beforeLocaleSwitch', (switch) => {
    console.log('onBeforeLanguageSwitch', switch.oldLocale, switch.newLocale, switch.initialSetup)

    // You can override the new locale by setting it to a different value
    if(switch.newLocale === 'fr') {
      switch.newLocale = 'en'
    }
  })

  // called right after a new locale has been set
  nuxtApp.hook('i18n:localeSwitched', (switch) => {
    console.log('onLanguageSwitched', switch.oldLocale, switch.newLocale)
  })
})