Nuxt 404 错误页面应该重定向到主页

Question

我正在寻找一种方法，当页面不存在时使用 Nuxt.Js 始终重定向到主页。

几天前，我们的站点地图生成出现了一些问题，我们提交了不存在的错误网址。 Google Search Console 显示了大量的 404，我们想通过 301 重定向到主页来修复它们。

我试过这个

created() {
    this.$router.push(
      this.localePath({
        name: 'index',
        query: {
          e: 'er'
        }
      })
    )
  }

虽然页面成功重定向到主页，但我认为谷歌会遇到问题，因为页面最初呈现为 404。

我也试过这个

  async asyncData({ redirect }) {
    return redirect(301, '/el?e=rnf')
  },

但没有用（与获取相同）

关于解决这个问题的任何想法？

原文由 mauxtin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在 nuxt 中创建一个默认的 404 页面——只需将一个名为 _.vue 的文件放在您的 ~/pages/ 目录中。这是您的 404 页 :)

或者你可以使用另一种方法来创建这样的页面： https ://github.com/nuxt/nuxt.js/issues/1614 但我没有尝试过

然后将一个简单的 404-redirect-middleware 添加到此页面：

 // !!! not tested this code !!!
middleware: [
  function({ redirect }) {
    return redirect(301, '/el?e=rnf')
  },
],

原文由 gleam 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

如果找不到页面，请不要重定向到主页， 如您在这篇 Google 文章中所见：创建自定义 404 页面

相反，重定向到 404 错误页面

只需使用 error

  async asyncData({ params, $content, error }) {
    try {
      const post = await $content('blog', params.slug).fetch()
      return { post }
    } catch (e) {
      error({ statusCode: 404, message: 'Post not found' })
    }
  }

不要忘记在布局文件夹中创建一个错误页面 error.vue

原文由 Leonardo Cavalcante 发布，翻译遵循 CC BY-SA 4.0 许可协议