Nuxt3 i18n非英文字符路由404问题：刷新后恢复正常求助

问题场景 #

使用以下Nuxt3结合i18n的链接代码时：

<NuxtLink :to="`${localePath('ser')}/${$t('est')}/${$t('pro')}`">

跳转时出现404错误，提示：

No match found for location with path "/fa/%D8%AE%D8%AAA/تن/ج"

但刷新页面后，目标页面可正常显示。

问题原因 #

1. 客户端路由匹配逻辑不兼容：$t()返回的是翻译后的实际文本（如示例中的波斯语内容），直接将其拼接在localePath()生成的路径后，会导致客户端路由系统无法识别这个拼接出来的路径——因为客户端路由依赖预定义的路由规则（基于路由键名而非翻译文本）。而刷新页面时，服务端会重新解析请求路径并映射到对应的路由规则，因此能正常加载页面。
2. 路由生成方式错误：没有遵循Nuxt i18n的路由生成规范，直接手动拼接本地化文本作为路由片段，破坏了i18n对路由的自动管理逻辑。

解决方法 #

方案1：使用命名路由+参数传递 #

假设目标路由是命名为ser的动态路由（例如定义为/ser/:est/:pro），请通过localePath传入路由名称和动态参数，让i18n自动处理本地化路由的生成：

<NuxtLink :to="localePath({ 
  name: 'ser', 
  params: { 
    est: $t('est'), 
    pro: $t('pro') 
  } 
})">

注意：这里的name需要与你在路由配置中定义的路由名称完全一致，参数名也要匹配路由中的动态参数占位符。

方案2：确保静态站点预生成所有本地化路由 #

如果你的项目采用静态站点生成（SSG）模式，需要在nuxt.config.ts中配置i18n的pages选项，确保所有本地化的路由都被预生成，这样客户端路由才能正确匹配：

export default defineNuxtConfig({
  i18n: {
    locales: ['en', 'fa'],
    defaultLocale: 'en',
    pages: {
      'ser/_est/_pro': {
        fa: '/ser/:est/:pro' // 对应波斯语的路由结构
      }
    }
  }
})

方案3：禁止直接拼接翻译文本到路由路径 #

永远不要将$t()的返回值直接拼接到路由路径中，翻译后的文本可能包含特殊字符、空格或不符合路由规则的内容，必须依赖Nuxt i18n提供的localePath等官方方法来生成本地化路由。

内容的提问来源于stack exchange，提问作者Hadi Majidi