Nuxt i18n 动态路由 localePath() 正确使用指南

Nuxt i18n 动态路由链接问题解析

在 nuxt 3 项目中，当我们尝试使用 localepath() 辅助函数为带有动态参数的路由（如 /rental/:id）生成多语言链接时，可能会遇到路由无法识别的错误，例如 route with name 'rental/123___nl' does not exist。这通常是由于动态路由的定义方式不符合 nuxt 3 的约定，以及 localepath() 的使用方式不正确导致的。

1. Nuxt 3 动态路由的正确定义

Nuxt 3 对动态路由的命名约定与 Nuxt 2 有所不同。在 Nuxt 3 中，动态路由参数应使用方括号 [] 而非下划线 _。因此，在 i18n.config.js 或 nuxt.config.ts 的 pages 配置中，你需要将 _id 更改为 [id]。

错误示例 (Nuxt 2 风格):

// i18n.config.js 或 nuxt.config.ts
{
  pages: {
    'rental/_id': { // Nuxt 2 风格的动态路由定义
      nl: '/verhuur/:id',
      en: '/rental/:id',
      de: '/mietbestand/:id',
    },
  }
}

正确示例 (Nuxt 3 风格):

// i18n.config.js 或 nuxt.config.ts
{
  pages: {
    'rental/[id]': { // Nuxt 3 风格的动态路由定义
      nl: '/verhuur/[id]', // 注意这里也应保持一致
      en: '/rental/[id]',
      de: '/mietbestand/[id]',
    },
  }
}

请确保你的 i18n.config.js 中的路径定义与 Nuxt 3 的文件系统路由约定（例如 pages/rental/[id].vue）保持一致。

2. 引入 useLocalePath() 组合式函数

在你的 Vue 组件的 script setup 中，为了使用 localePath()，你需要首先从 vue-i18n 或 nuxt-i18n 提供的组合式函数中引入它。

<script setup>
import { useLocalePath } from '#imports'; // 或者根据你的 Nuxt i18n 版本和配置，可能是 'vue-i18n' 或 'nuxt-i18n'

const localePath = useLocalePath();

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

3. localePath() 的正确用法：对象形式传参

对于动态路由，直接将字符串路径（如 'rental/123'）传递给 localePath() 是不正确的。Nuxt i18n 期望接收一个包含路由 name 和 params 的对象，以便正确解析动态参数并生成多语言链接。

错误示例：

萌动AI

CreateAI旗下AI动漫视频生成平台

438

查看详情

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

这种方式会导致 Nuxt 尝试查找名为 rental/123 的静态路由，而不是动态路由 rental-[id]。

正确示例：

你需要提供路由的 name 属性和对应的 params 对象。Nuxt 会根据文件系统路由自动生成路由名称。例如，如果你的文件是 pages/rental/[id].vue，那么对应的路由名称通常是 rental-id。

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

<script setup>
import { useLocalePath } from '#imports'; // 确保已引入

const localePath = useLocalePath();

const item = {
  id: '123',
  title: 'rental_item_title'
};
</script>

在这个示例中：

• name: 'rental-id' 指定了目标路由的名称。这个名称通常由 Nuxt 根据你的文件系统结构自动生成（例如，pages/rental/[id].vue 对应 rental-id）。
• params: { id: item.id } 提供了动态路由参数 id 的值。

总结与注意事项

1. Nuxt 3 动态路由命名： 始终使用 [param] 格式定义动态路由，而不是 _param。这不仅适用于文件系统路由，也适用于 i18n.config.js 中的 pages 配置。
2. 引入 useLocalePath()： 在 script setup 中正确引入并声明 localePath 常量。
3. localePath() 对象传参： 对于所有动态路由，务必使用对象形式 { name: 'route-name', params: { paramName: 'value' } } 来调用 localePath()。
4. 路由名称匹配： 确保 localePath() 中 name 属性的值与 Nuxt 自动生成的路由名称一致。你可以在 Nuxt 开发服务器启动时，通过查看路由表（例如在 Vue DevTools 中）来确认路由名称。

遵循以上步骤，你将能够正确地在 Nuxt 3 项目中使用 localePath() 为动态 i18n 路由生成多语言链接，避免“路由不存在”的错误。

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