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

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

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

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