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

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

正文

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

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

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

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

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

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

這里有個(gè)方法：你可以通過(guò)簡(jiǎn)單地創(chuàng)建 pages/*.vue 組件來(lái)完成這個(gè)需求：

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

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

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

我們?cè)?asyncData 方法中去做這個(gè)重定向，是因?yàn)槲覀冊(cè)谀抢镉猩舷挛摹５牵覀円部梢栽?fetch 方法中達(dá)到同樣的效果：

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

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

總結(jié)

以上所述是小編給大家介紹的Vue在 Nuxt.js 中重定向 404 頁(yè)面的方法,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)錯(cuò)新站長(zhǎng)站網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！