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

【问题标题】：Nuxt 404 error page should redirect to homepageNuxt 404 错误页面应重定向到主页
【发布时间】：2019-01-31 11:20:38
【问题描述】：

我正在寻找一种在使用 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 相同）

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

【问题讨论】：

你试过404的中间件重定向吗？
@gleam 不，我该如何检查？
将中间件添加到 404 页。这个中间件只会做 301 重定向。 nuxtjs.org/api/pages-middleware
@gleam 我如何只针对 404 页的想法？我不确定我是否可以访问中间件中的错误对象。
嗯...我会试着写一个答案:)

标签： vue.js seo nuxt.js

【解决方案1】：

如果找不到页面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中创建一个错误页面

【讨论】：

【解决方案2】：

您可以在 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')
  },
],

【讨论】：

我正在寻找一种更好的解决方案，该解决方案也适用于 .com/test/test/test 等子页面。在这种情况下会起作用吗？ ://
_.vue 是全局 404 错误页面。它适用于任何路线（例如：/asd/asd/as/das/e/zxvc/s/wde/gw => _.vue => 中间件 => 301）
_.vue 对于防止用户访问中间路由也很有用。假设您有一条类似/categories/:categoryId/benefits/:benefitId/details 的路由，并且您不希望用户访问/categories/:categoryId/benefits/:benefitId。您需要做的就是在您要忽略的路由的同一目录级别创建一个_.vue 文件，在本例中为/categories/_categoryId/benefits

【解决方案3】：

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

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

尽管如此，gleam 的解决方案还是很聪明的，如果能达到目的，那就很好。只是想指出另一种解决方案。

【讨论】：

【解决方案4】：

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

为了获得最大的灵活性，请使用 Dan 提到的 layouts 文件夹

【讨论】：

【解决方案5】：

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

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

【讨论】：