vue-router: Cara Handel Page Refresh Agar Tidak 404 Not Found

Menggunakan vue-router untuk membangun aplikasi Single Page Application (SPA) sangatlah mudah dan menyenangkan. Namun, karena aku adalah pendatang baru pada teknologi ini sehingga menemukan beberapa kendala minor. Salah satunya adalah halaman tidak ditemukan (404) saat halaman direfresh oleh browser karena terlalu lama tidak aktif. Ini sering terjadi saat aplikasi dibuka menggunakan Google Chrome versi android.

Berdasarkan permasalahan tersebut, akhirnya aku mengakali masalah route url ini dengan sekenario sebagai berikut:

  • Mendeteksi apakah halaman mengalami refresh atau tidak
  • Jika halaman mengalami refresh maka url yang sedang direfresh disimpan pada localStorage()
  • Jika halaman yang direfresh bukan berupa halaman utama dari SPA maka diredirect ke halaman utama SPA
  • Di halaman utama, dibuat intercept untuk mendeteksi jika yang direload bukan halaman utama maka url yang disimpan pada localStorage() tadi digunakan untuk mengganti url home menggunakan $router.replace() agar user diarahkan ke halamaan yang diminta.

Menghandel Page Refresh

Langsung saja pada kodingan untuk mendeteksi page refresh, menyimpan url pada localStorage, dan mengalihkan halaman jika url yang direfresh bukanlah url home dari aplikasi SPA. Pada artikel ini, halaman utama/home/beranda SPA diasumsikan sebagai: https://apps.nusagates.com

if (performance.navigation.type == performance.navigation.TYPE_RELOAD) {
    let current_url = location.href
    let base_url = 'https://apps.nusagates.com'
    localStorage.setItem("reloadUrl", current_url.replace(base_url,''));
    if (!(current_url == base_url)) {
        location.href = base_url
    }
}

Kodingan di atas jika di Laravel bisa ditaruh pada file app.js

Keterangan Kode:

  • current_url digunakan untuk mendeteksi url saat ini yang sedang direfresh
  • base_url adalah halaman beranda/home aplikasi SPA.

Url yang disimpan pada localStorage hanyalahan url relatif yang didefinisikan di router. Oleh sebab itu, kita perlu menghapus base_url dari current_url saat mau disimpan ke localStorage() menggunakan current_url.replace(base_url,'').

Jika halaman yang direload bukan beranda SPA maka dialihkan ke beranda.

if (!(current_url == base_url)) {
        location.href = base_url
    }
}

Menampilkan Halaman yang Diminta

Setelah halaman berhasil diredirect ke halaman home/beranda SPA maka selanjutnya adalah menambahkan kodingan untuk menampilkan halaman yang diminta sesuai yang direfresh.

Contoh alurnya begini:

  • User merefresh halaman: https://apps.nusagates.com/account
  • User dialihkan ke halaman: https://apps.nusagates.com untuk menghindari halaman tidak ditemukan (404)
  • Konten dari halaman https://apps.nusagates.com/account ditampilkan menggunakan vue-router.

Pertama, kita mengambil url yang disimpan pada localStorage().

let reloadUrl = localStorage.getItem('reloadUrl')

Selanjutnya, kita menampilkan konten pada halaman yang direfresh tersebut menggunakan vue-router. Ini hanya dijalankan jika halaman yang direftresh bukanlah halaman home dari SPA yang dalam artikel ini dicontohkan https://apps.nusagates.com.

let_base_url = 'https://apps.nusagates.com'
if (reloadUrl != base_url) {
  this.$router.replace(reloadUrl)
}

Kodingan ini ditaruh pada Component beranda SPA yang digunakan.