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

Question

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

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

我试过了

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

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

我也试过这个

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

但没有成功（与 fetch 相同）

有什么解决方案吗？

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')
  },
],

Answer 2

我个人建议创建一个 404 页面，与被重定向到主页并可能对发生的事情感到困惑相比，它提供更好的用户体验。

要创建自定义错误页面，只需在 layouts folder 中创建 error.vue 文件并将其视为页面。参见official documentation。我们已经实施了很多次，Google 从未抱怨过。

不过，gleam 的解决方案很聪明，如果能达到目的，那就太好了。只是想指出另一个解决方案。

Answer 3

如果您需要为您的用户提供自定义路由，例如 domain.com/<userID> 然后将名称为 _.vue 的文件放入 ~/pages/ 目录将不起作用，因为自定义用户路由需要它。

为了获得最大的灵活性，请使用 Dan

提到的布局文件夹

Answer 4

在 pages 目录创建名为 _.vue 的文件，内容为：

<script>
export default {
  asyncData ({ redirect }) {
    return redirect('/')
  }
}
</script>

Answer 5

如果找不到页面，永远不会重定向到主页as you can see in this Google's article: Create custom 404 pages

相反，重定向到 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

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

Nuxt 404 error page should redirect to homepage

seo

vue.js

nuxt.js