Nuxt 3 i18n 动态路由与 localePath() 的正确用法

1. 理解 Nuxt 3 中的动态路由配置

在 nuxt 3 项目中，当您配置 i18n 模块的页面路由时，对于动态路由，应采用方括号 [] 的语法来定义参数，而非 nuxt 2 时代常用的下划线 _ 语法。这是 nuxt 3 文件系统路由和 i18n 模块协同工作的关键。

错误的配置示例 (Nuxt 2 风格):

// i18n.config.js (不推荐在 Nuxt 3 中这样配置动态路由)
{
  pages: {
    'rental/_id': { // 使用下划线 _id
      nl: '/verhuur/:id',
      en: '/rental/:id',
      de: '/mietbestand/:id',
    },
  }
}

正确的配置示例 (Nuxt 3 风格):

请确保您的 i18n.config.js 或 nuxt.config.ts 中的路由配置遵循 Nuxt 3 的动态路由命名约定。将 _id 更改为 [id]。

// i18n.config.js 或 nuxt.config.ts
{
  pages: {
    'rental/[id]': { // 使用方括号 [id]
      nl: '/verhuur/[id]',
      en: '/rental/[id]',
      de: '/mietbestand/[id]',
    },
  }
}

这种配置方式与 Nuxt 3 的文件系统路由 (pages/rental/[id].vue) 保持一致，确保了 i18n 模块能够正确解析并生成对应的路由名称。

2. 在组件中引入 useLocalePath()

在 Nuxt 3 的 Composition API 中，您需要显式地引入 useLocalePath() 才能在组件中使用它。

<script setup>
import { useLocalePath } from '#imports' // 或者直接从 'vue-i18n' 或 'nuxt-i18n' 导入，具体取决于您的项目配置

const localePath = useLocalePath()

// ... 其他组件逻辑
</script>

这将 localePath 函数暴露给模板和脚本，使其可以用于生成国际化路径。

3. localePath() 与动态路由参数的正确用法

当您需要为动态路由生成国际化路径时，不能简单地将带有实际 ID 的字符串路径传递给 localePath()，例如 'rental/123'。因为 localePath() 期望的是一个路由对象，该对象包含路由的 name 和任何必要的 params。

法语写作助手

法语助手旗下的AI智能写作平台，支持语法、拼写自动纠错，一键改写、润色你的法语作文。

31

查看详情

Nuxt 会根据您的文件系统路由 (pages/rental/[id].vue) 自动生成一个路由名称，通常是文件路径中 pages 目录后的部分，将斜杠替换为连字符，动态参数部分也会相应处理。对于 pages/rental/[id].vue，其生成的路由名称通常是 rental-id。

错误的 localePath() 用法示例:

<template>
  <nuxt-link :to="localePath('rental/123')">
    <!-- 这会导致警告：Route with name 'rental/123___nl' does not exist -->
    {{ $t(item.title) }}
  </nuxt-link>
</template>

正确的 localePath() 用法示例:

您需要向 localePath() 传递一个对象，其中包含路由的 name 和 params。

<template>
  <nuxt-link :to="localePath({ name: 'rental-id', params: { id: item.id } })">
    {{ $t(item.title) }}
  </nuxt-link>

  <!-- 假设 item.id 为 '123' -->
  <!-- 最终生成的路径可能类似于 /en/rental/123 或 /nl/verhuur/123 -->
</template>

<script setup>
import { useLocalePath } from '#imports'

const localePath = useLocalePath()

// 示例数据，实际项目中 item 会通过 props 或 API 获取
const item = {
  id: '123',
  title: 'rental_item_title'
}
</script>

在这个示例中：

• name: 'rental-id' 指定了目标路由的名称。请注意，Nuxt 3 通常会将 pages/rental/[id].vue 这样的文件路由自动命名为 rental-id。
• params: { id: item.id } 提供了动态路由所需的参数，其中 id 对应于 [id]。

总结与注意事项

• Nuxt 3 动态路由语法: 务必在 i18n.config.js 或 nuxt.config.ts 中使用 [id] 格式定义动态路由，而非 _id。
• Composition API 引入: 在使用 localePath() 的组件中，不要忘记通过 const localePath = useLocalePath() 进行引入。
• localePath() 的参数: 对于动态路由，始终向 localePath() 传递一个包含 name 和 params 属性的对象。name 对应于 Nuxt 自动生成的路由名称（例如 rental-id），params 包含所有动态参数及其值。
• 路由名称查找: 如果不确定自动生成的路由名称，可以在开发模式下，通过 Nuxt DevTools 或检查路由配置来确认。通常，它会是文件路径去掉 pages/ 前缀后，将 / 替换为 -，动态参数如 [id] 保持不变或转换为 id。

遵循以上步骤，您将能够有效地在 Nuxt 3 项目中为国际化动态路由生成正确的链接，避免路由不存在的警告，并确保用户在不同语言环境下都能访问到正确的页面。

以上就是Nuxt 3 i18n 动态路由与 localePath() 的正确用法的详细内容，更多请关注php中文网其它相关文章！