Apakah keadaan apabila Vue tidak membenarkan halaman itu kembali?

Vue ialah rangka kerja JavaScript popular yang sangat berkuasa dalam membina antara muka pengguna. Walaupun Vue menyediakan banyak ciri berguna, kadangkala anda mungkin menghadapi masalah rumit: Vue tidak membenarkan halaman itu kembali. Artikel ini akan meneroka masalah ini dan cara menyelesaikannya.

Mengapa Vue menghalang halaman daripada kembali?

Pertama, mari kita fahami sebab Vue menghalang halaman daripada kembali. Ini biasanya disebabkan oleh cara Vue Router dilaksanakan. Vue Router ialah pengurus penghalaan rasmi untuk Vue.js. Ia menjadikan penggunaan penghalaan dalam aplikasi satu halaman (SPA) sangat mudah.

Vue Router mengurus penghalaan berdasarkan API sejarah HTML5. API ini menyediakan banyak ciri berguna, seperti memaparkan URL dalam bar alamat dan anda boleh menggunakan URL seperti "/products/123" untuk menavigasi ke halaman yang berbeza. Walau bagaimanapun, API sejarah juga mempunyai kelemahan, iaitu, ia tidak segerak. Ini bermakna apabila pengguna menekan butang belakang penyemak imbas, Penghala Vue perlu memuatkan komponen halaman sebelumnya secara tidak segerak sebelum ia boleh memaparkannya.

Ini menyebabkan masalah: jika anda sedang menunggu komponen selesai dimuatkan, dan pengguna menekan butang belakang penyemak imbas sementara itu, Vue akan menghalang halaman daripada kembali.

Bagaimana untuk menyelesaikan masalah ini?

Pembangun Vue menyediakan dua kaedah untuk menyelesaikan masalah ini. Mari kita jelaskan satu persatu.

1 Gunakan komponen keep-alive Vue

Vue menyediakan komponen yang dipanggil keep-alive. Tujuannya adalah untuk cache keadaan antara komponen atau mengelakkan rendering semula. Komponen keep-alive membolehkan anda mengekalkan contoh komponen yang dimuatkan semasa menukar komponen dan bukannya memusnahkannya. Ini boleh meningkatkan prestasi aplikasi sambil juga menyelesaikan isu pemulangan halaman.

Untuk menggunakan komponen keep-alive anda perlu memasukkannya ke dalam penghala anda:

<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component"/>
  </keep-alive>
</router-view>

Tambahkan kod ini pada Apl Vue anda supaya apabila pengguna menekan butang belakang , sudah dimuatkan contoh komponen akan dikekalkan dan tidak akan dimusnahkan. Selain itu, apabila pengguna kembali ke komponen, contoh komponen yang disimpan dipaparkan dan bukannya memuatkan semula. Ini menyelesaikan masalah Vue tidak membenarkan halaman kembali.

2. Gunakan pilihan sandaran Vue Router

Jika menggunakan komponen keep-alive tidak dapat menyelesaikan masalah, anda juga boleh menggunakan pilihan sandaran Vue Router. Pilihan sandaran membolehkan anda memberikan laluan sandaran apabila ralat penghalaan dicetuskan. Dengan menentukan laluan sandaran ini, anda boleh membina UI yang mengendalikan keadaan ralat. Dalam laluan alternatif ini, anda boleh memaparkan mesej ralat yang memberitahu pengguna mengapa mereka tidak boleh kembali. Dengan cara ini anda memastikan pengguna tidak kembali ke tempat yang tidak dijangka secara tidak sengaja.

Untuk menggunakan pilihan sandaran, anda perlu menentukannya dalam konfigurasi penghala:

const router = new VueRouter({
  mode: 'history',
  routes: [
    // normal routes...
    {
      path: '/error',
      component: ErrorPage
    },
    // fallback route
    { path: '*', component: ErrorPage }
  ]
});

Dalam contoh ini, kami telah menentukan komponen yang dipanggil ErrorPage dan dalam konfigurasi penghala Satu laluan alternatif telah dinyatakan. Laluan sandaran ini akan digunakan sekiranya semua laluan lain gagal padan.

Kesimpulan

Vue ialah rangka kerja yang sangat berkuasa, tetapi kadangkala ia boleh membawa kepada beberapa kesukaran. Jika anda menghadapi masalah dengan Vue tidak membenarkan halaman kembali, meneroka komponen kekal hidup dan pilihan sandaran ialah dua pilihan terbaik anda. Tidak kira kaedah yang anda gunakan, anda boleh menjamin bahawa pengalaman pengguna dikekalkan semasa menyelesaikan masalah ini.

Atas ialah kandungan terperinci Apakah keadaan apabila Vue tidak membenarkan halaman itu kembali?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!