Vue在Nuxt.js中如何重定向404頁面

小編給大家分享一下Vue在 Nuxt.js中如何重定向404頁面，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

吳橋網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)于2013年開始到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

Nuxt.js 依據(jù) pages 目錄結(jié)構(gòu)自動生成 vue-router 模塊的路由配置。

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

正文

對我來說，Nuxt 是我所用過最好用的軟件代碼之一。它可以讓我高效率地打造網(wǎng)站應(yīng)用，無論這些應(yīng)用是 SPA，還是 SSR，又或者是靜態(tài)站點，這同時也是 JAM Stack 上面所提到的趨勢。

順便提一點，我們這個網(wǎng)站Vuedose 也是使用 Nuxt 所建立靜態(tài)站點。

但是，絕大多數(shù)自己領(lǐng)悟的很有意思的使用技巧并沒有被記載沉淀下來，這不行，現(xiàn)在我們就來分享第一個 Nuxt 的技巧。

如果你熟悉 Nuxt.js，那么你就應(yīng)該知道pages 的概念是什么。同樣地，你也應(yīng)該知道這個特殊的Error Page，雖然它是被放在 Layouts 文件夾中的，但它是被作為一個 page。

你可以去重寫這個默認(rèn)的錯誤頁，并且根據(jù)你的需求去定制它，但是如果我們想要一個不同的表現(xiàn)形式呢？

在一些情況下，比如當(dāng)用戶訪問一個并不存在的頁面時，我們想要將其重定向到網(wǎng)站主頁。

這里有個方法：你可以通過簡單地創(chuàng)建 pages/*.vue 組件來完成這個需求：

<!-- pages/*.vue -->
<script>
export default {
 asyncData ({ redirect }) {
  return redirect('/')
 }
}
</script>

在 Nuxt 中，路由是通過文件命名來定義的。所以當(dāng)我們創(chuàng)建了一個 *.vue 文件是，我們實際上是在 Vue Router 上使用通配符的路由。

然后，我們使用 Nuxt 上下文中的 rediect 方法來實現(xiàn)重定向，無論它是在客戶端還是在服務(wù)器端。

我們在 asyncData 方法中去做這個重定向，是因為我們在那里有上下文。但是，我們也可以在 fetch 方法中達到同樣的效果：

<!-- pages/*.vue -->
<script>
export default {
 fetch ({ redirect }) {
  return redirect('/')
 }
}
</script>

快去使用一下吧，嘗試訪問任何一個不存在 url，你應(yīng)該能看到它是如何被重定向的。

以上是“Vue在 Nuxt.js中如何重定向404頁面”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站題目：Vue在Nuxt.js中如何重定向404頁面
文章位置：http://bm7419.com/article34/jcisse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計公司、外貿(mào)建站、品牌網(wǎng)站建設(shè)、網(wǎng)站收錄、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)