在某些情况下，您可能希望翻译 URL，而不仅仅是以区域代码作为前缀。配置自定义路径有两种方法，通过 模块配置 或在每个 页面组件 内部。
使用哪种方法是通过设置 customRoutes 选项 来配置的，默认值为 'page'。同时使用这两种方法是不可能的。
确保将 customRoutes 选项设置为 config 并在 pages 选项中添加自定义路径：
export default defineNuxtConfig({
i18n: {
customRoutes: 'config', // 禁用页面组件的自定义路由
pages: {
about: {
en: '/about-us', // -> 可通过 /about-us 访问（没有前缀，因为这是默认区域）
fr: '/a-propos', // -> 可通过 /fr/a-propos 访问
es: '/sobre' // -> 可通过 /es/sobre 访问
}
}
}
})
请注意，pages 对象中的每个键应 对应要本地化的路由名称。
自定义路由路径 必须以 / 开头 且 不得包含区域前缀。
您现在可以使用 localePath 函数或 <NuxtLinkLocale> 组件，但确保使用命名路由。例如路由 /services/advanced 应为 services-advanced：
<script setup>
const { t } = useI18n()
</script>
<template>
<NuxtLinkLocale to="about"> {{ t('about') }} </NuxtLinkLocale>
<NuxtLinkLocale to="services-advanced"> {{ t('advanced') }} </NuxtLinkLocale>
</template>
或：
<script setup>
const { t } = useI18n()
const localePath = useLocalePath()
</script>
<template>
<NuxtLink :to="localePath('about')"> {{ t('about') }} </NuxtLink>
<NuxtLink :to="localePath('services-advanced')"> {{ t('advanced') }} </NuxtLink>
</template>
localePath。您有一些路由，其 pages 目录如下：
-| pages/
---| me.vue
---| about.vue
---| services/
-----| index.vue
-----| advanced.vue
您需要设置 pages 属性如下：
export default defineNuxtConfig({
i18n: {
customRoutes: 'config',
pages: {
me: {
fr: '/moi',
},
about: {
fr: '/a-propos',
},
services: {
fr: '/offres',
},
'services-advanced': {
fr: '/offres/avancee',
}
}
}
})
/ 开头。您有一些路由，其 pages 目录如下：
-| pages/
---| about.vue
---| services/
-----| index.vue
-----| coaching.vue
-----| development/
-------| app.vue
-------| index.vue
-------| website.vue
您需要设置 pages 属性如下：
export default defineNuxtConfig({
i18n: {
customRoutes: 'config',
pages: {
about: {
fr: '/a-propos'
},
services: {
fr: '/offres'
},
'services-development': {
fr: '/offres/developement'
},
'services-development-app': {
fr: '/offres/developement/app'
},
'services-development-website': {
fr: '/offres/developement/site-web'
},
'services-coaching': {
fr: '/offres/formation'
}
}
}
})
如果某个区域缺少自定义路径，则使用 defaultLocale 自定义路径（如果已设置）。
假设您有一些动态路由，如：
-| pages/
---| blog/
-----| [date]/
-------| [slug].vue
以下是您如何在配置中配置这些特定页面：
export default defineNuxtConfig({
i18n: {
customRoutes: 'config',
pages: {
'blog-date-slug': {
// 参数需要在这里放回，就像您在 Nuxt 动态路由中的做法一样
// https://nuxt.com/docs/guide/directory-structure/pages#dynamic-routes
ja: '/blog/tech/[date]/[slug]'
// ...
}
}
}
})
v8.0.1 或更高版本的用户
/example/:param 现在应为 /example/[param]）您可以使用 defineI18nRoute 编译宏为每个页面组件设置自定义路径。
<script setup>
defineI18nRoute({
paths: {
en: '/about-us', // -> 可通过 /about-us 访问（没有前缀，因为这是默认区域）
fr: '/a-propos', // -> 可通过 /fr/a-propos 访问
es: '/sobre' // -> 可通过 /es/sobre 访问
}
})
</script>
要为动态路由配置自定义路径，您需要在路径中使用双方括号，类似于您在 Nuxt 动态路由 中所做的：
<script setup>
defineI18nRoute({
paths: {
en: '/articles/[name]',
es: '/artículo/[name]'
}
})
</script>
defineI18nRoute 编译宏在构建时被树摇掉，不包含在分发文件中。definePageMeta({ name: '...' }) 的注意事项默认情况下，Nuxt 在构建时覆盖生成的路由值，这会破坏在解析本地化路径时的自定义命名路由（使用 definePageMeta 设置 name）。
Nuxt v3.10 引入了实验性功能 scanPageMeta，这需要启用，以使自定义命名路由在使用 Nuxt I18n 时工作。
可以通过以下方式启用此实验功能：
export default defineNuxtConfig({
experimental: {
scanPageMeta: true,
}
})