Vue在 Nuxt.js 中重定向 404 頁面的方法

Nuxt.js 依據 pages 目錄結構自動生成 vue-router 模塊的路由配置。

要在頁面之間使用路由，我們建議使用<nuxt-link> 標簽。

正文

對我來說，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，你應該能看到它是如何被重定向的。

總結

以上所述是小編給大家介紹的Vue在 Nuxt.js 中重定向 404 頁面的方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com