Saya memiliki urutan berikut yang terjadi:
Layar utama
Memuat layar
Layar hasil
Di beranda, ketika seseorang mengklik tombol, saya mengirimnya ke layar pemuatan, melalui:
this.$router.push({path: "/loading"});
Dan begitu tugas mereka selesai, mereka dikirim ke layar hasil melalui
this.$router.push({path: "/results/xxxx"});
Masalahnya adalah, biasanya mereka ingin beralih dari hasil kembali ke layar utama, tetapi ketika mereka mengklik kembali, mereka dikirim ke memuat lagi yang mengirim mereka kembali ke hasil, sehingga mereka terjebak dalam loop tak terbatas & tidak dapat pergi kembali ke layar utama.
Ada ide bagaimana cara memperbaikinya? Idealnya saya suka jika ada opsi seperti:
this.$router.push({path: "/loading", addToHistory: false});
yang akan mengirim mereka ke rute tanpa menambahkannya ke riwayat.
sumber
this.$router.replace({path: "/results/xxxx"})
$router.replace
dari Memuat. Ini sekarang memungkinkan saya kembali dari Hasil -> Utama tetapi saya kemudian tidak dapat melanjutkan ke hasil.Jawaban:
Ada cara sempurna untuk menangani situasi ini
Anda dapat menggunakan pelindung dalam-komponen untuk mengontrol rute di tingkat granul
Buat perubahan berikut dalam kode Anda
Di komponen layar utama
Dalam memuat komponen layar
Dalam komponen layar hasil
Saya baru saja membuat aplikasi vue kecil untuk mereproduksi masalah yang sama. Ini berfungsi di lokal saya sesuai pertanyaan Anda. Semoga ini bisa menyelesaikan masalah Anda juga.
sumber
Saya kira
router.replace
adalah cara untuk pergi - tetapi masih beberapa garis pemikiran (belum diuji):Pada dasarnya pada
$router
perubahan itu membuat komponen pemuatan sampai memancarkanload:stop
, kemudian ia membuatrouter-view
sumber
Ini adalah panggilan yang sulit mengingat sedikitnya yang kita ketahui tentang apa yang terjadi dalam rute pemuatan Anda.
Tapi...
Saya tidak pernah memiliki kebutuhan untuk membangun rute pemuatan, hanya komponen pemuatan yang akan diberikan pada beberapa rute selama tahap pengumpulan data.
Satu argumen untuk tidak memiliki rute pemuatan adalah bahwa pengguna berpotensi menavigasi langsung ke URL ini (secara tidak sengaja) dan kemudian sepertinya tidak akan memiliki konteks yang cukup untuk mengetahui ke mana harus mengirim pengguna atau tindakan apa yang harus diambil. Meskipun ini bisa berarti bahwa ia jatuh ke rute kesalahan pada titik ini. Secara keseluruhan, bukan pengalaman hebat.
Lain adalah bahwa jika Anda menyederhanakan rute Anda, navigasi antar rute menjadi lebih sederhana dan berperilaku seperti yang diharapkan / diinginkan tanpa menggunakan
$router.replace
.Saya mengerti ini tidak menyelesaikan pertanyaan dengan cara Anda bertanya. Tapi saya sarankan memikirkan kembali rute pemuatan ini.
Aplikasi
Kulit
Halaman Utama
Halaman Hasil
Komponen Hasil
Pada dasarnya komponen hasil yang sama persis sudah Anda miliki, tetapi jika
loading
itu benar, atau jikaresults
adalah nol, bagaimanapun Anda suka, Anda dapat membuat dataset palsu untuk beralih dan membuat versi kerangka, jika Anda mau. Kalau tidak, Anda bisa menyimpan barang-barang seperti yang Anda miliki.sumber
Pilihan lain adalah menggunakan API Sejarah .
Setelah Anda berada di layar Hasil, Anda dapat menggunakan ReplaceState untuk mengganti URL dalam riwayat browser.
sumber
Ini bisa dilakukan dengan
beforeEach
kait dari router.Yang perlu Anda lakukan adalah Anda harus menyimpan variabel secara global atau di localStorage di
loading
komponen saat data dimuat (sebelum mengarahkan keresults
komponen):Dan kemudian Anda harus memeriksa variabel ini di hook sebelumEach dan lompat ke komponen yang benar:
Juga, jangan lupa untuk mereset nilai ke false di
main
komponen Anda ketika tombol kueri diklik (sebelum merutekan keloading
komponen):sumber
Layar pemuatan Anda seharusnya tidak dikontrol oleh vue-router sama sekali. Pilihan terbaik adalah menggunakan modal / hamparan untuk layar pemuatan Anda, dikendalikan oleh javascript. Ada banyak contoh untuk vue. Jika Anda tidak dapat menemukan apa pun maka vue-bootstrap memiliki beberapa contoh mudah untuk diterapkan.
sumber