Lzh on GitHub

用法

Nuxt i18n 模块的基础用法

基本设置

让我们开始配置项目的 locales 和 defaultLocale。

对于本项目，我们使用以下属性配置语言环境：

  • code: 必需属性，语言环境代码在整个 Nuxt I18n 中使用，并用作语言环境的标识符。
  • name: 语言环境的名称，这是一种用户友好的方式来识别语言环境。
  • file: 提供对象形式翻译消息的文件。

defaultLocale 应该设置为其中一个已配置语言环境的 code，设置此项是可选但推荐的，因为它将在导航到不存在的路由时用作回退。

nuxt.config.ts
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，此文件以对象形式提供翻译消息。

Nuxt I18n 有一个（可配置的）文件夹结构，语言环境文件来源于此，语言环境文件默认应在 <rootDir>/i18n/locales 中创建。

{
  "welcome": "Welcome"
}

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

pages/index.vue
<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>

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

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

自动导入

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

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

路由本地化

Nuxt I18n 为每个语言环境生成本地化路由，在最基本的设置中，这以每个路由带有语言环境代码前缀的形式出现。

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

$localePath 使用 $localePath 解析本地化路由

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

此函数接受两个参数：

  • route: 路由名称或带有名称属性的路由对象
  • 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>

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

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

切换语言

$switchLocalePath 函数返回当前页面的本地化路由版本，它接受一个语言环境代码，当前路由应在此语言环境代码中进行本地化。

<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">Show profile</button>
</template>