zizhujianzhan_web/error.vue

<template>
    <div class="errorBox">
      <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250701/1751346180738003.jpg" alt="页面不存在" v-if="errorCode == 404">
      <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250701/1751346208700657.jpg" alt="服务器渲染错误" v-if="errorCode == 500">
      <div class="errorText" v-if="errorCode == 404">对不起，您访问的页面不存在</div>
      <div class="errorText" v-if="errorCode == 500">服务器渲染错误</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);
      console.log('错误明细:', errorText.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>