vuedose.tips（翻译系列十三）

Redirect 404 Not Found in Nuxt.js

This week I have two special announcements!

First, this Wednesday 10th, at 12.00PM CEST we’re opening the tickets of the VueDay in sunny Alicante, Spain. It’s going to be a community-driven Vue.js conference with great speakers including core members like the Chopin brothers, Eduardo San Martin, myself and more awesome ones!

Hope to see you there! Follow @VueDose on twitter to stay tuned with the latest news!

Second, I’m preparing the Vue Tips Overload! Over the next week, a tip will be published here by a different author each day. Are you as excited as I am?

That said, let’s jump into the tip!

对我来说，Nuxt是我使用过的最好的软件之一。遵循JAM Stack趋势，无论是SPA，Sever Side Rendered（SSR）应用程序还是静态生成的网站，构建Web应用程序都让我变得高效。

但是，仍然有很多时间发现了非常有趣的技巧，这些技巧并未记录在案……需要停止！让我们分享第一个热门的Nuxt提示！

如果您熟悉Nuxt.js，则应该了解页面的概念。您还应该知道有一个特殊的“错误”页面（好吧，它进入“布局”文件夹，但这是一个页面）。

您可以覆盖默认错误页面并根据需要对其进行自定义……但是，如果我们想要其他行为，该怎么办？

在某些情况下，我们可能希望当用户访问不存在的页面时，我们将其重定向到主页。

诀窍是：您可以通过创建以下pages / *.vue组件轻松地做到这一点：

<!-- pages/*.vue -->
<script>
export default {
  asyncData ({ redirect }) {
    return redirect('/')
  }
}
</script>

在Nuxt中，路由由文件命名约定定义。因此，当我们创建* .vue文件时，实际上是在Vue Router上使用通配符路由。

然后，无论是在客户端还是服务器上，我们都使用Nuxt上下文中的redirect方法执行重定向。

我们在asyncData方法上执行此操作，因为我们在那里有上下文，但是它也可以完美地与fetch方法一起使用：

<!-- pages/*.vue -->
<script>
export default {
  fetch({ redirect }) {
    return redirect("/");
  }
};
</script> 

Go and try it out by typing any non-existent url. You should see how it is be redirected.