基本用法
nuxt/i18n v7 模块基本用法。
开始使用 @nuxtjs/i18n 的最快方法是定义支持的 locales 列表，并通过 vueI18n 选项提供一些翻译消息给 vue-i18n：
nuxt.config.ts
{
modules: [
'@nuxtjs/i18n'
],
i18n: {
locales: ['en', 'fr', 'es'],
defaultLocale: 'en',
vueI18n: {
fallbackLocale: 'en',
messages: {
en: {
welcome: 'Welcome'
},
fr: {
welcome: 'Bienvenue'
},
es: {
welcome: 'Bienvenido'
}
}
}
}
}
通过这样的设置，@nuxtjs/i18n 为您所有的页面生成本地化的 URL，使用 locales 选项中提供的代码作为前缀，默认语言除外（在 路由 中阅读更多）。
vueI18n 选项原样传递给 vue-i18n，可参考 文档 获取可用选项。
nuxt-link
在应用中使用 <nuxt-link> 渲染内部链接时，您需要为当前语言获取正确的 URL。为此，@nuxtjs/i18n 注册了一个全局混入，提供了一些辅助函数：
localePath– 返回给定页面的本地化 URL。第一个参数可以是路径或路由的名称，或者是一个对象以处理更复杂的路由。可以将语言代码作为第二个参数传递，以生成特定语言的链接：
<nuxt-link :to="localePath('index')">{{ $t('home') }}</nuxt-link>
<nuxt-link :to="localePath('/')">{{ $t('home') }}</nuxt-link>
<nuxt-link :to="localePath('index', 'en')">英语首页</nuxt-link>
<nuxt-link :to="localePath('/app/profile')">路径路由到: {{ $t('Profile') }}</nuxt-link>
<nuxt-link :to="localePath('app-profile')">名称路由到: {{ $t('Profile') }}</nuxt-link>
<nuxt-link :to="localePath({ name: 'category-slug', params: { slug: category.slug } })">
{{ category.title }}
</nuxt-link>
<!-- 也可以省略 'name' 和 'path'. -->
<nuxt-link :to="localePath({ params: { slug: 'ball' } })">{{ category.title }}</nuxt-link>
请注意，localePath 可以使用路由的未加前缀的路径，该路径必须以 '/' 开头或路由的基本名称，以生成本地化的 URL。基本名称对应于 Nuxt 在解析您的 pages/ 目录时生成的名称，更多信息请参见 Nuxt 的文档。
switchLocalePath– 返回当前页面在另一种语言的链接：
<nuxt-link :to="switchLocalePath('en')">英语</nuxt-link>
<nuxt-link :to="switchLocalePath('fr')">法语</nuxt-link>
为了方便，这些方法在应用的上下文中也可用：
/plugins/myplugin.js
export default ({ app }) => {
// 获取首页的本地化路径
const localePath = app.localePath('index')
// 获取切换当前路由到法语的路径
const switchLocalePath = app.switchLocalePath('fr')
}
localeRoute– 返回给定页面的Route对象。它的作用类似于localePath，但返回由 Vue Router 解析的路由，而不仅仅是完整的路由路径。这可能很有用，因为从localePath返回的完整路径可能不包含提供的输入的所有信息（例如页面未指定的路由参数）。
const { fullPath } = localeRoute({ name: 'index', params: { foo: '1' } })
localeLocation– 返回给定页面的Location对象。它的作用类似于localePath，但返回由 Vue Router 解析的Location，而不仅仅是完整的路由路径。这可能很有用，因为从localePath返回的完整路径可能不包含提供的输入的所有信息（例如页面未指定的路由参数）。
<a href="#" @click="$router.push(localeLocation({ name: 'index', params: { foo: '1' } }))">
导航
</a>