原文作者：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
- 個人微信公眾號：搜尋「程式猿何大叔」
請求翻譯授權記錄
覺得本文不錯的話，分享一下給小夥伴吧~