使用教程

基本配置

我们从配置项目的 locales 和 Nuxt 配置中的 defaultLocale 开始。

在这个项目中，我们通过以下属性配置 locales：

• code：必需属性，locale 代码在 Nuxt I18n 中使用，是 locale 的标识符。
• name：locale 的名称，这是一个用户友好的方式来识别 locale。
• file：一个以对象形式提供翻译消息的文件。

defaultLocale 应该设置为已配置 locales 之一的 code，设置这个是可选的，但建议设置，因为在导航至不存在的路由时将作为后备使用。

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    defaultLocale: 'en',
    locales: [
      { code: 'en', name: 'English', file: 'en.json' },
      { code: 'nl', name: 'Nederlands', file: 'nl.json' }
    ]
  }
})

一个典型的项目至少有一个 file 对于每个已配置的 locale，该文件以对象形式提供翻译消息。

Nuxt I18n 有一个（可配置的）文件夹结构，从中获取 locale 文件，locale 文件应默认创建在 <rootDir>/i18n/locales。

{
  "welcome": "Welcome"
}

{
  "welcome": "Welkom"
}

通过这个配置，我们可以添加一个基本的语言切换器，并使用以下方式翻译我们的第一条消息：

<script setup>
const { locales, setLocale } = useI18n()
</script>

<template>
  <div>
    <button v-for="locale in locales" @click="setLocale(locale.code)">
      {{ locale.name }}
    </button>
    <h1>{{ $t('welcome') }}</h1>
  </div>
</template>

使用已配置的 locales，我们创建了一个简单的语言切换器，通过点击一个 <button> 元素，你可以在英语和荷兰语之间切换，并看到“欢迎”消息和页面 URL 变化为相应的语言。

现在你已经有了一个基本配置，可以开始完全本地化你的 Nuxt 应用程序了！

自动导入

一些组合函数，例如 useI18n，是由 Nuxt 自动导入的。 如果你禁用了 autoImports，你需要从 #imports 显式导入这些函数，如下所示：

<script setup>
import { useI18n, useLocalePath } from '#imports'
// ...
</script>

路由本地化

Nuxt I18n 为每个 locale 生成本地化路由，在最基本的设置中，这以带有 locale 代码的每个路由的前缀变体的形式呈现。

在应用程序内链接到路由时，你需要获取当前 locale 的本地化路由。这是通过 Nuxt I18n 提供的工具函数完成的。

使用 $localePath 解析本地化路由

$localePath 函数用于获取给定路由的本地化路由，该函数由 useLocalePath 返回，以便在 <template> 外部使用。

该函数接受两个参数：

• route：路由的名称或带有名称属性的路由对象
• locale：路由应本地化的 locale 代码，默认为当前 locale

<template>
  <NuxtLink :to="$localePath('index')">{{ $t('home') }}</NuxtLink>
  <NuxtLink :to="$localePath('index', 'en')">Homepage in English</NuxtLink>
  <NuxtLink :to="$localePath('user-profile')">Route to {{ $t('profile') }}</NuxtLink>
  <NuxtLink :to="$localePath({ name: 'category-slug', params: { slug: category.slug } })">
    {{ category.title }}
  </NuxtLink>
</template>

<script setup>
const localePath = useLocalePath()
</script>

<template>
  <NuxtLink :to="localePath('index')">{{ $t('home') }}</NuxtLink>
  <NuxtLink :to="localePath('index', 'en')">Homepage in English</NuxtLink>
  <NuxtLink :to="localePath('user-profile')">Route to {{ $t('profile') }}</NuxtLink>
  <NuxtLink :to="localePath({ name: 'category-slug', params: { slug: category.slug } })">
    {{ category.title }}
  </NuxtLink>
</template>

由于本地化路由可以根据你的配置而变化，使用路由名称确保了准确解析。Nuxt I18n 生成类型以便于这个过程，提供类型安全和增强的开发体验。要使用这些类型，请在 Nuxt 配置中启用 typedPages。

路由名称对应于 Nuxt 在解析你的 pages 目录时生成的名称，更多信息请参见 Nuxt 文档。

在语言之间切换

$switchLocalePath 函数返回当前页面路由的本地化版本，它接受一个 locale 代码，指明当前路由应本地化成哪种语言。

<template>
  <NuxtLink :to="$switchLocalePath('en')">English</NuxtLink>
  <NuxtLink :to="$switchLocalePath('nl')">Nederlands</NuxtLink>
</template>

<script setup>
const switchLocalePath = useSwitchLocalePath()
</script>

<template>
  <NuxtLink :to="switchLocalePath('en')">English</NuxtLink>
  <NuxtLink :to="switchLocalePath('nl')">Nederlands</NuxtLink>
</template>

使用路由对象的 URL 路径

您可以使用 useLocaleRoute 本地化高级 URL 路径。如果您希望以编程方式控制内部链接，这很有用。

useLocaleRoute 是一个可组合函数，返回给定页面的 Route 对象。

它的工作方式类似于 useLocalePath，但返回由 Vue Router 解析的路由，而不是完整的路由路径。这可能是有用的，因为从 useLocalePath 返回的路径可能不会携带提供的输入的所有信息（例如，页面未指定的路由参数）。

<script setup>
const localeRoute = useLocaleRoute()
function onClick() {
  const route = localeRoute({ name: 'user-profile', query: { foo: '1' } })
  if (route) {
    return navigateTo(route.fullPath)
  }
}
</script>

<template>
  <button @click="onClick">显示个人资料</button>
</template>