Nuxt i18n动态路由参数无法动态配置多语言文章URL问题

因为definePageMeta是编译时执行的宏，确实没法拿到组件内异步获取的数据来动态配置多语言路由参数。这里提供两个可行的解决方案，绕开这个限制实现文章多语言URL翻译：

方案一：用路由中间件处理参数匹配与重定向 #

适合SSR/CSR场景，通过中间件在路由跳转时验证并修正动态参数：

1. 确保nuxt.config.ts里的i18n配置正确开启动态参数：

export default defineNuxtConfig({
  i18n: {
    locales: ['en', 'zh'],
    defaultLocale: 'en',
    dynamicRouteParams: true,
    // 其他i18n配置
  }
})

2. 创建路由中间件middleware/i18n-blog-slug.ts：

export default defineNuxtRouteMiddleware(async (to) => {
  const { locale } = useI18n()
  const targetSlug = to.params.blog as string

  // 根据当前语言和传入的slug获取文章数据
  const { data: post } = await useAsyncData(`post-${targetSlug}-${locale.value}`, () => {
    return $fetch('/api/posts/get-by-slug', {
      params: { slug: targetSlug, lang: locale.value }
    })
  })

  // 如果当前slug不是对应语言的正确值，重定向到正确路由
  if (post.value && post.value.localizedSlug !== targetSlug) {
    return navigateTo({
      name: to.name,
      params: { blog: post.value.localizedSlug },
      query: to.query
    }, { redirectCode: 301 })
  }
})

3. 在[blog].vue中注册中间件并获取文章：

<script setup>
definePageMeta({
  middleware: 'i18n-blog-slug'
})

const route = useRoute()
const { locale } = useI18n()

const { data: post } = await useAsyncData(`post-${route.params.blog}-${locale.value}`, () => {
  return $fetch('/api/posts/get-by-slug', {
    params: { slug: route.params.blog, lang: locale.value }
  })
})
</script>

方案二：预生成多语言路由（静态站点场景） #

如果你的博客是静态生成的，可以在构建阶段提前生成所有多语言路由：

在nuxt.config.ts中配置预渲染路由：

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: async () => {
        const locales = ['en', 'zh']
        // 获取所有文章的多语言slug数据
        const allPosts = await $fetch('/api/posts/all-with-localized-slugs')
        
        const routes = []
        for (const post of allPosts) {
          locales.forEach(lang => {
            routes.push(`/${lang}/blog/${post.slugs[lang]}`)
          })
        }
        return routes
      }
    }
  }
})

运行nuxt generate时，Nuxt会自动生成所有语言版本的文章路由，完美适配i18n的动态参数需求。

关键注意点 #

• 你的API需要支持两种查询方式：要么通过任意语言的slug+当前语言返回文章，要么能返回包含所有语言slug的文章列表
• 重定向时使用301状态码，有利于SEO优化
• SSR场景下，中间件的异步操作不会阻塞页面渲染，要做好数据加载状态的处理

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