如何在Nuxt i18n中使用localePath()跳转动态路由？

你遇到的警告是因为localePath('rental/123')把拼接后的字符串当作路由名称去匹配，但实际定义的动态路由名称并不是这个格式。正确调用localePath处理动态路由有两种方式：

方式一：指定路由名称与参数 #

Nuxt会把动态路由rental/_id编译为名称为rental-_id的路由（可通过$router.options.routes查看实际路由列表确认），调用时传入路由名称和参数对象即可：

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

方式二：传入带占位符的路径与参数 #

直接传入包含路径占位符和参数的对象，localePath会自动根据当前语言替换占位符并转换为对应语言的路由路径：

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

原理说明：localePath接收字符串参数时，会将其视为路由名称而非路径。动态路由的名称是基于页面文件路径生成的（如rental/_id对应rental-_id），而非拼接参数后的路径，所以直接传'rental/123'找不到对应路由才会触发警告。

内容的提问来源于stack exchange，提问作者Justin van Dijk