Nuxt3 自訂錯誤頁面

Nuxt3 有預設的錯誤頁面,該如何替換呢?

錯誤頁面

我們可以在專案路徑下(和 nuxt.config.ts 同一層)建立 error.vue,發生錯誤時就會導向至 error.vue 頁面了。

不過有時候並不是所有錯誤都顯示 error.vue,例如 404 頁面,這時候就可以在 error.vue 中將指定的 HTTP 狀態碼再跳轉至特定頁面了

404 頁面

在 error.vue 中增加以下程式碼,透過判斷狀態碼等於 404 時將網址跳轉到 /404
    
<script setup lang="ts">
const props = defineProps({
    error: Object
})

let statusCode = props.error?.statusCode || 500

if (statusCode === 404) {
    // 跳轉到自訂的 404 頁面
    clearError({ redirect: '/404' })
}
</script>
    

然後在 pages 資料夾下建立 404.vue ,之後存取沒有定義的路徑時就會自動重定向至 404 頁面了

留言