Nuxt3中使用i18n翻译带slug的页面路由问题

1. 核对defineI18nRoute的动态参数配置 #

确保pages/post/[slug].vue里的路由配置明确映射动态段，参数占位符要和文件名的[slug]对应：

export default defineI18nRoute({
  locales: {
    en: '/post/:slug',
    et: '/postitus/:slug'
  }
})

别把动态参数写成固定的slug，必须用:slug来匹配路由里的动态值。

2. 检查Nuxt I18n的全局路由配置 #

打开nuxt.config.ts，确认：

• 已正确注册et语言到locales数组
• 路由策略（比如strategy: 'prefix_except_default'）配置正确，没有屏蔽动态路由的多语言映射
• 可以通过Nuxt开发者工具查看生成的路由列表，确认/postitus/:slug是否存在于路由表中

3. 验证路由跳转时的参数传递 #

切换到爱沙尼亚语后，跳转路由必须正确传递slug参数，不管用useRouter()还是<NuxtLink>：

<NuxtLink :to="{ name: 'post-slug', params: { slug: 'your-post-slug', locale: 'et' } }">
  查看文章
</NuxtLink>

注意路由名称的正确性——对应pages/post/[slug].vue的路由名通常是post-slug，别写错。

4. 处理静态生成/SSR的路由匹配问题 #

• 如果是静态站点生成（SSG），运行nuxt generate时要确保包含et语言的所有post页面，可在配置里指定需要预渲染的slug列表
• 如果是SSR模式，确认服务器端的路由规则能正确解析/postitus/:slug，映射到对应的页面组件

5. 清除缓存重启服务 #

开发环境下缓存可能导致路由不更新：停止Nuxt服务，删除.nuxt和node_modules/.cache目录，重新启动后再测试路由。

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