【译】Vue 的小奇技（第十三篇）：在 Nuxt.js 中重定向 404 页面

由于译者最近跳槽到了新公司，上手新业务，有两周没有及时更新译文了，时效性实在是差，还请各位读者见谅。

前言

这周我要特别宣布两件事情！

第一，这周三 10 号，中欧夏令时的正午 12 点，我们将会开售VueDay 的门票，届时会在阳光明媚的西班牙亚里坎提举行。这是一个由社区驱动的 Vue.js 技术研讨会，会上邀请了很多大牛过来演讲，其中包括了核心成员想 Chopin 兄弟、Eduardo San Martin、我自己还有其他很多很厉害的人。

希望在会上能够遇到你们啦！在 twitter 可以关注@VueDose 以获取最新的大会消息哦。

第二，我正在准备Vue Tips Overload！下周开始，每天将会由不同的作者发布他们的 Vue 小奇技文章到这里。你们有没有和我一样兴奋期待呀？

接下来，我们开始这节小奇技的讲解吧。

正文

对我来说，Nuxt 是我所用过最好用的软件代码之一。它可以让我高效率地打造网站应用，无论这些应用是 SPA，还是 SSR，又或者是静态站点，这同时也是 JAM Stack 上面所提到的趋势。

顺便提一点，我们这个网站Vuedose 也是使用 Nuxt 所建立静态站点。

但是，绝大多数自己领悟的很有意思的使用技巧并没有被记载沉淀下来，这不行，现在我们就来分享第一个 Nuxt 的技巧。

如果你熟悉 Nuxt.js，那么你就应该知道pages 的概念是什么。同样地，你也应该知道这个特殊的Error Page，虽然它是被放在 Layouts 文件夹中的，但它是被作为一个 page。

你可以去重写这个默认的错误页，并且根据你的需求去定制它，但是如果我们想要一个不同的表现形式呢？

在一些情况下，比如当用户访问一个并不存在的页面时，我们想要将其重定向到网站主页。

这里有个方法：你可以通过简单地创建 pages/*.vue 组件来完成这个需求：

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

在 Nuxt 中，路由是通过文件命名来定义的。所以当我们创建了一个 *.vue 文件是，我们实际上是在 Vue Router 上使用通配符的路由。

然后，我们使用 Nuxt 上下文中的 rediect 方法来实现重定向，无论它是在客户端还是在服务器端。

我们在 asyncData 方法中去做这个重定向，是因为我们在那里有上下文。但是，我们也可以在 fetch 方法中达到同样的效果：

<!-- pages/*.vue -->
<script>
export default {
  fetch ({ redirect }) {
    return redirect('/')
  }
}
</script>
复制代码

快去使用一下吧，尝试访问任何一个不存在 url，你应该能看到它是如何被重定向的。

这就是本周的内容啦！你可以在线阅读这篇原文，里面有可供复制粘贴的源代码。如果你喜欢这个系列的话，请分享给你的同事们！