<p>Apabila saya memasukkan URL yang tidak wujud, saya kadangkala mendapat ralat tersuai dan selalunya ralat pelayan (imej)</p> <p>Ini adalah halaman <code>error.vue</code> <pre class="brush:php;toolbar:false;"><template> <div class="halaman-ralat"> <kelas div="halaman-tidak-ditemui" v-jika="error.statusCode === 404"> <div class="imej"> <img src="/images/page-not-found.png" </div> <h1 class="teks-huruf besar-huruf-berat-tebal"> {{ $t('notFound.error404') }} </h1> <p class="maklumat my-3 my-lg-4"> {{ $t('notFound.error404Info') }} </p> </div> <h1 class="teks-huruf besar-berat-bold" v-else-if="error.statusCode === 500"> {{ $t('notFound.error500') }} </h1> <h1 class="teks-huruf besar-berat-tebal" {{ $t('notFound.error500') }} </h1> <NuxtLink class="home-back text-capitalize mb-lg-3" :to="localePath('/')"> {{ $t('notFound.home') }} </NuxtLink> </div> </template> <skrip> eksport lalai { prop: ['error'] } </skrip> <style lang="scss" // dialih keluar untuk meminimumkan kod </style></pre> <p><strong>Nota: 1- <code>trrrrr</code> hanyalah rentetan rawak yang saya tulis dalam URL untuk menunjukkan URL yang tidak wujud 2- Dalam mod pembangunan, kadangkala saya mendapat ralat 404 tersuai, kebanyakan masa saya mendapat <kod>Saiz tindanan panggilan maksimum dikembalikan</kod> <p>Konfigurasi PWA saya: </p> <pre class="brush:php;toolbar:false;">pwa: { meta: { tajuk: "contoh", pengarang: "contoh", }, ikon: { tujuan: "mana-mana" nyata: { paparan: "berdiri sendiri", nama: "contoh", lang: "ms", gunakanWebmanifestExtension: benar, warna_tema: "#01bac6", }, },</pre> <p>Soalan saya ialah: 1-Mengapa halaman ralat tersuai saya sentiasa tidak berfungsi? </p> <p>2- Mengapakah ralat kod 500 sedangkan ia sepatutnya 404 kerana saya berada di halaman yang tidak wujud? </p>

asyncData(context) {
        return context.app.$api.fetchSinglePage(context.params.slug)
        .then(response => {
            return {
                page: response.content
            }
        })
        .catch(e => context.error(e)) //This line causes the problem
    }

asyncData(context) {
    return context.app.$api.fetchSinglePage(context.params.slug)
      .then(response => {
        return {
          page: response.content
        }
      })
      .catch(e =>{
        context.error({ statusCode: 404 }) //this is how I solved it
      })
  },