nuxt-i18n和404使用nuxt重定向的问题

Question

我正在开发一个带有自定义404页面的nuxt项目。当我安装模块nuxt-i18n以使我的网站使用法语和英语时，我遇到了为404页面创建的自定义路由的问题。

• 当我在extendRoutes中允许我的自定义路由时，我无法访问像"这样的路由；page/en/"；，它被重定向到404
• 当我禁用这个自定义路由时，我没有问题，我的nuxt-i18n配置正确

如何同时管理两者？

这是我的nuxt.config.js文件：

export default {
mode: 'universal',
router: {
trailingSlash: true,
extendRoutes(routes, resolve) {
routes.push({
name: 'custom',
path: '*',
component: resolve(__dirname, 'pages/404.vue'),
redirect: '/404/'
})
}
},
generate: {
fallback: '404.html'
},
modules: [
'nuxt-i18n',
],
i18n: {
locales: [{
code: 'fr',
iso: 'fr-FR',
file: 'fr.json',
dir: 'ltr'
},
{
code: 'en',
iso: 'en-US',
file: 'en.json',
dir: 'ltr'
}],
prefix_except_default: 'prefix_except_default',
defaultLocale: 'fr',
langDir: 'locales/',
},
}

Answer 1

我也有同样的问题，我认为nuxt-i18n与自定义404页面不兼容。我找到的唯一解决方案是通过以下方式编辑路径：path: '/:lang/*':

routes.push({
name: 'custom',
path: '/:lang/*',
component: resolve(__dirname, 'pages/404.vue')
})

它起作用，但创建了一个奇怪的/en/toto到/en/en/toto的重定向

Answer 2

原因是extendRoutes的运行速度快于i18n添加路由的速度。结果，一条难看的路线被添加到下面

routes: [{
path: "/en*",
component: resolve(__dirname, 'pages/404.vue'),
name: "custom"
}, {
path: "/jp*",
component: resolve(__dirname, 'pages/404.vue'),
name: "custom"
},  {
path: "*",
component: resolve(__dirname, 'pages/404.vue'),
name: "custom"
}]]

所以我推迟了extendRoutes的执行。

extendRoutes(routes, resolve) {
setTimeout(()=> {
routes.push({
name: 'custom',
path: '*',
component: resolve(__dirname, 'pages/404.vue'),
redirect: '/404/'
})
})
}

生成结果

routes: [{
path: "*",
component: resolve(__dirname, 'pages/404.vue'),
name: "custom"
}]