Starboth-Cloud-H5/layouts/error.vue

<template>
  <div class="flex justify-center pt-30">
    <h1 v-if="error.statusCode === 404">
      {{ pageNotFound }}
    </h1>
    <div v-else>
      <h1 class="text-center">
        {{ otherError }}
      </h1>
      <v-btn type="submit" @click="refreshPage">重新加载页面</v-btn>
    </div>
    <!-- <NuxtLink to="/"> Home page </NuxtLink> -->
  </div>
</template>

<script>
export default {
  name: 'EmptyLayout',
  layout: 'empty',
  props: {
    error: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      pageNotFound: '404 Not Found',
      otherError: '出现错误',
    };
  },
  head() {
    console.log('tempErr',JSON.stringify(this.error))
    const title =
      this.error.statusCode === 404 ? this.pageNotFound : this.otherError;
    return {
      title,
    };
  },
  methods: {
    // 刷新页面
    refreshPage() {
      const currentPath = this.$route.path;
      const queryParams = this.$route.query;

      // 添加一个随机参数以确保刷新
      this.$router.replace({
        path: currentPath,
        query: {
          ...queryParams,
          _refresh: Date.now()
        }
      });
    }
  }
};
</script>

<style scoped>
h1 {
  font-size: 20px;
}
</style>