指南
自定义路由路径
自定义特定语言环境的路径名称。
在某些情况下，您可能希望在将 URL 前缀化为语言环境代码的同时进行翻译。配置自定义路径有两种方法，可以通过 模块配置 或每个 页面组件 内进行配置。
使用哪种方法是通过设置 customRoutes 选项 来配置的，默认设置为 'page'。同时使用两种方法是不可能的。
模块配置
确保将 customRoutes 选项设置为 config，并在 pages 选项中添加您的自定义路径：
nuxt.config.ts
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。示例 1：基本 URL 本地化
您有如下的 pages 目录：
-| pages/
---| me.vue
---| about.vue
---| services/
-----| index.vue
-----| advanced.vue
您需要按照如下方式设置 pages 属性：
nuxt.config.ts
export default defineNuxtConfig({
i18n: {
customRoutes: 'config',
pages: {
me: {
fr: '/moi'
},
about: {
fr: '/a-propos'
},
services: {
fr: '/offres'
},
'services-advanced': {
fr: '/offres/avancee'
}
}
}
})
所有 URL 必须以
/ 开头示例 2：本地化 URL 的部分
您有如下的 pages 目录：
-| pages/
---| about.vue
---| services/
-----| index.vue
-----| coaching.vue
-----| development/
-------| app.vue
-------| index.vue
-------| website.vue
您需要按照如下方式设置 pages 属性：
nuxt.config.ts
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 自定义路径。
示例 3：动态路由
假设您有一些动态路由如下：
-| pages/
---| blog/
-----| [date]/
-------| [slug].vue
这是您在配置中如何配置这些特定页面的：
nuxt.config.ts
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]'
// ...
}
}
}
})
页面组件
对于更新到
路径参数解析已更改，以匹配 Nuxt 3 的格式，您需要更新您的自定义路径（例如
v8.0.1 或更高版本的用户
路径参数解析已更改，以匹配 Nuxt 3 的格式，您需要更新您的自定义路径（例如
/example/:param 现在应该为 /example/[param]）您可以使用 defineI18nRoute 编译宏为每个页面组件设置自定义路径。
pages/about.vue
<script setup>
defineI18nRoute({
paths: {
en: '/about-us', // -> 可通过 /about-us 访问（无前缀，因为它是默认语言环境）
fr: '/a-propos', // -> 可通过 /fr/a-propos 访问
es: '/sobre' // -> 可通过 /es/sobre 访问
}
})
</script>
要为动态路由配置自定义路径，您需要以双方括号形式在路径中使用它，类似于您在 Nuxt 动态路由 中的做法：
pages/articles/[name
<script setup>
defineI18nRoute({
paths: {
en: '/articles/[name]',
es: '/artículo/[name]'
}
})
</script>
defineI18nRoute 编译宏在构建时被树摇出，不包含在 dist 文件中。definePageMeta({ name: '...' }) 注意事项
默认情况下，Nuxt 在构建时会覆盖生成的路由值，这会破坏自定义命名路由（通过 definePageMeta 设置 name）在解析本地化路径时的功能。
Nuxt v3.10 引入了实验性功能 scanPageMeta，这需要启用以使自定义命名路由在使用 Nuxt I18n 时工作。
可以通过以下方式启用此实验性功能：
nuxt.config.ts
export default defineNuxtConfig({
experimental: {
scanPageMeta: true
}
})