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

但没有工作（与相同提取）

有什么解决方案的想法吗？

Answer 1

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

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

中提到的layouts文件夹

Answer 2

如果找不到页面，则永远不要重定向到主页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中创建一个错误页面

Answer 3

您可以在nuxt中创建默认的404页-只需在〜/ pages /目录中放置一个名称为_.vue的文件即可。这是您的404页：）

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

然后向该页面添加一个简单的404重定向中间件：

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

Answer 4

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

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

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

Answer 5

在包含内容的 _.vue 目录中创建一个名为 pages 的文件：

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

Nuxt 404错误页面应重定向到首页

5 个答案: