Nxut3前端状态码404

376 阅读1分钟

由现有的项目改向nuxt3,逻辑遵从现在项目,通过接口返回的字段进行前端状态码404

1. 在根目录下新建一个error.vue文件,并在文件中写上你需要的404页面样式

我这里是做测试,就简单的写一些

image.png

<template>
    <div>
        <h1>这里是错误404页面</h1>
    </div>
</template>

2. 在需要写逻辑的页面开始写逻辑

我这里项目的逻辑是通过接口返回的code字段规定的参数来判断

<script setup lang="ts">
    import { defineComponent,reactive, ref, toRefs } from 'vue';
    const route = useRoute()
    const {data,error} = await useAsyncData('users', () => 
        $fetch(`http://xxx.com/api/tag/detail?id=${route.params.id}&article_num=3`)
    )
    if(data.value.code !== 0){
        throw createError ({ statusCode: 404, })
    }else{
        console.log('将会正确执行数据逻辑')
    }
</script>

image.png