Время чтения: 2 мин.
В Nuxt.js есть несколько способов выкинуть 404 ошибку, чтобы фреймворк корректно её обработал и отобразил соответствующую страницу ошибки.
Основные методы:
1. Использование throw createError()
// В любом компоненте или странице
throw createError({
statusCode: 404,
statusMessage: 'Страница не найдена',
fatal: true
})2. В асинхронных данных (asyncData или fetch)
export default {
async asyncData({ $axios, error }) {
try {
const post = await $axios.$get('/api/post/123')
if (!post) {
throw createError({ statusCode: 404, message: 'Пост не найден' })
}
return { post }
} catch (err) {
if (err.response && err.response.status === 404) {
throw createError({ statusCode: 404, message: 'Пост не найден' })
}
// Обработка других ошибок
}
}
}3. В middleware
export default function ({ route, redirect, error }) {
if (!route.params.id) {
// Старый способ (для Nuxt 2)
// error({ statusCode: 404, message: 'Не найдено' })
// Новый способ (Nuxt 3)
throw createError({ statusCode: 404, message: 'Не найдено' })
}
}4. В обработчиках API маршрутов (server/api)
// server/api/test.get.ts
export default defineEventHandler((event) => {
throw createError({
statusCode: 404,
statusMessage: 'Not Found'
})
})Настройка кастомной страницы 404
Nuxt автоматически использует файл ~/error.vue для отображения ошибок. Вы можете создать или изменить этот файл для кастомного отображения:
<!-- ~/error.vue -->
<template>
<div>
<h1 v-if="error.statusCode === 404">Страница не найдена</h1>
<h1 v-else>Произошла ошибка</h1>
<p>{{ error.message }}</p>
<button @click="handleError">Вернуться на главную</button>
</div>
</template>
<script setup>
const props = defineProps({
error: Object
})
const handleError = () => clearError({ redirect: '/' })
</script>Для Nuxt 3 также можно создать отдельную страницу ~/pages/[...slug].vue для обработки 404 ошибок маршрутизации.
Добавить комментарий