Api

组件

Nuxt i18n 模块的组件 API。

<NuxtLinkLocale>

该组件基于 <NuxtLink> 构建,但通过内部使用 localePath() 改变了默认行为,从而更方便地链接到本地化路由。

示例

基本用法

<template>
  <NuxtLinkLocale to="/">{{ $t('home') }}</NuxtLinkLocale>
</template>

<!-- 相当于 -->

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

<template>
  <NuxtLink :to="localePath('/')">{{ $t('home') }}</NuxtLink>
</template>

强制语言解析

<template>
  <NuxtLinkLocale to="/" locale="nl">{{ $t('home') }}</NuxtLinkLocale>
</template>

<!-- 相当于 -->

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

<template>
  <NuxtLink :to="localePath('/', 'nl')">{{ $t('home') }}</NuxtLink>
</template>

属性

该组件支持所有为 <NuxtLink> 记录的属性,以及以下描述的属性。

属性描述
locale可选属性,用于强制使用传递的语言进行本地化,默认为当前语言。与 localePath()locale 参数相同。

该组件作为一个受限的 <NuxtLink> ,它内部使用 switchLocalePath 链接到提供的语言中的相同页面。

启用 experimental.switchLocalePathLinkSSR 后,该组件将在服务器端渲染期间正确呈现动态路由参数。

示例

基本用法

<template>
  <SwitchLocalePathLink locale="nl">荷兰语</SwitchLocalePathLink>
  <SwitchLocalePathLink locale="en">英语</SwitchLocalePathLink>
</template>

<!-- 相当于 -->

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

<template>
  <NuxtLink :to="switchLocalePath('nl')">荷兰语</NuxtLink>
  <NuxtLink :to="switchLocalePath('en')">英语</NuxtLink>
</template>

属性

该组件支持大部分,但不是所有为 <NuxtLink> 记录的属性(不支持 tohref),以及以下描述的属性。

属性描述
locale可选属性,用于强制使用传递的语言进行本地化,默认为当前语言。与 switchLocalePath()locale 参数相同。