【譯】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，你應該能看到它是如何被重定向的。
這就是本週的內容啦！你可以線上閱讀這篇原文，裡面有可供複製貼上的原始碼。如果你喜歡這個系列的話，請分享給你的同事們！