【譯】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
• 我的微信公衆號：搜索「程序猿何大叔」

請求翻譯受權記錄

---

以爲本文不錯的話，分享一下給小夥伴吧~