zizhujianzhan_web/error.vue

<template>
  <div class="errorBox">
    <img src="./public/error/404.png" alt="页面不存在" v-if="errorCode == 404">
    <img src="./public/error/error.png" alt="服务器渲染错误" v-if="errorCode == 500">
    <div class="errorText" v-if="errorCode == 404">对不起，您访问的页面不存在（{{ errorText }}）</div>
    <div class="errorText" v-if="errorCode == 500">服务器渲染错误（{{ errorText }}）</div>
    <div @click="goHome" class="goHome">返回网站首页</div>
  </div>
</template>

<script setup>
    //1.处理错误 start ---------------------------------------->
    //获得错误信息
    const error = useError();
    //console.log('错误信息:', error.value);
    //获得错误代码与错误文字
    const errorCode = ref(0)
    const errorText = ref('')
    errorCode.value = error.value.statusCode;
    errorText.value = error.value.message;
    //console.log('错误代码:', errorCode.value);
    //1.处理错误 end ---------------------------------------->

    //2.处理跳转 start ---------------------------------------->
    const router = useRouter()
    const goHome = () => {
        router.push('/')
    }
    //2.处理跳转 end ---------------------------------------->
</script>

<style lang="less" scoped>
  .errorBox {
    width: 100%;
    text-align: center;
    padding-top: 150px;
    img {
      width: 404px;
      height: 302px;
      margin: 0 auto;
    }
    .goHome {
      width: 120px;
      height: 32px;
      line-height: 32px;
      font-size: 14px;
      color: #20242E;
      text-align: center;
      margin: 0 auto;
      background: #fff;
      border: 1px solid #D4D6D9;
      border-radius: 2px;
      cursor: pointer;
    }
    .errorText {
        font-size:16px;
        color: #727785;
        margin-top: 40px;
        margin-bottom: 20px;
    }
  }
</style>