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

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"
}]