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

• 原文地址：Redirect 404 Not Found in Nuxt.js

• 原文做者：Alex Jover

• 译者：程序猿何大叔

特别声明：本文是做者 Alex Jover 发布在 VueDose 上的一个系列。

版权归做者全部。

译者在翻译前已经和做者沟通获得了翻译整个系列的受权。

为了避免影响你们阅读，得到受权的记录会放在本文的最后。

说明

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

前言

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

第一，这周三 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，你应该能看到它是如何被重定向的。

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

结语

此系列的其余文章，会同步系列官网的发布状况，及时地翻译发布到掘金。请持续关注「程序猿何大叔」，相信我会给你们带来更多优质的内容，不要忘了点赞~

若是想要了解译者的更多，请查阅以下：

• 我的博客：blog.hadesz.com
• 我的 github 仓库：github.com/hadeshe93
• 我的微信公众号：搜索「程序猿何大叔」

请求翻译受权记录

---

以为本文不错的话，分享一下给小伙伴吧~