Nuxt3请求错误拦截(自定义错误页面)

接收Error

例如：

/**
 * 菜单详情
 */
const { data, error } = await menuShowApi(menuId)

判断error是否有值

/**
 * 服务端时并且error有值就抛出错误
 */
if (process.server && error.value) {
    showError('请确认链接是否正确')
}

自定义错误

根目录新建一个error.vue

<template>
    <clientOnly>
        <div class="app-error">
            <p>{{ error.message }}</p>
            <a @click="handleError">返回首页</a>
        </div>
    </clientOnly>
</template>
<script setup lang="ts">
/**
 * 接收错误信息
 */
const props = defineProps({
    error: {
        type: Object,
        required: true
    }
})
/**
 * 清除错误信息并返回首页
 */
const handleError = () => {
    clearError({ redirect: '/' })
}
</script>

说明

{{ error.message }}等于showError('请确认链接是否正确')

Nuxt3请求接口封装+自动带上Token