Nuxt 3 集成I18n时动态路由跳转失效求助

AI 小北

2026-6-25

解决Nuxt 3 + i18n动态路由跳转问题

问题根源分析

你的NuxtLink无法正常工作，核心问题有两个：

路由名称错误：Nuxt 3对pages/products/[type].vue生成的路由名称是products-type，而非你使用的products
i18n路由映射与预期路径不匹配：当前配置将products/[type]映射为sk locale的/produkty/[type]，会导致跳转路径变为/produkty/all而非你需要的/products/all

修复步骤

1. 修正路由名称

将模板中的路由名称改为正确的products-type，修改后的代码如下：

<template>
  <NuxtLink :to="localePath({ name: 'products-type', params: { type: 'all' } })">All</NuxtLink>
  <NuxtLink :to="localePath({ name: 'products-type', params: { type: 'favorites' } })">Favorites</NuxtLink>
</template>

<script setup>
const localePath = useLocalePath()
</script>

2. 调整i18n配置匹配预期路径

如果你希望默认locale（sk）的跳转路径为/products/all而非/produkty/all，需要修改nuxt.config.ts中的i18n配置：

export default defineNuxtConfig({
    devtools: { enabled: true },
    modules: [
        '@nuxtjs/i18n',
    ],
    i18n: {
        vueI18n: './translations/i18n.config.ts',

        locales: [
            { code: 'sk', iso: 'sk-SK', name: 'Slovenčina' },
        ],
        defaultLocale: 'sk',

        // 改为prefix_except_default，默认locale路径不带前缀
        strategy: 'prefix_except_default',

        // 如果不需要自定义路径映射，可移除customRoutes和pages配置
        // customRoutes: 'config',
        // pages: {
        //     'products/[type]': {
        //         sk: '/produkty/[type]'
        //     },
        // },
    }
})

如果确实需要保留/produkty/[type]的sk语言路径，只需确保路由名称正确即可，无需移除customRoutes配置。