Występuje następująca sekwencja:
Główny ekran
Ładowanie ekranu
Ekran wyników
Gdy na stronie głównej ktoś kliknie przycisk, wysyłam go do ekranu ładowania, poprzez:
this.$router.push({path: "/loading"});
Po zakończeniu zadania są wysyłane do ekranu wyników za pośrednictwem
this.$router.push({path: "/results/xxxx"});
Problem polega na tym, że zwykle chcą przejść z wyników z powrotem do ekranu głównego, ale gdy klikną z powrotem, są wysyłani do ładowania ponownie, co przesyła je z powrotem do wyników, więc utknęli w nieskończonej pętli i nie mogą wrócić powrót do ekranu głównego.
Wszelkie pomysły, jak to naprawić? Idealnie chciałbym, gdyby istniała opcja:
this.$router.push({path: "/loading", addToHistory: false});
który wysłałby ich na trasę bez dodawania jej do historii.
źródło
this.$router.replace({path: "/results/xxxx"})
$router.replace
z Ładowanie. To pozwala mi teraz wrócić do wyników -> Główne, ale nie mogę przejść do wyników.Odpowiedzi:
Istnieje doskonały sposób na poradzenie sobie z tą sytuacją
Za pomocą wbudowanego zabezpieczenia można kontrolować trasę na poziomie granulatu
Wprowadź następujące zmiany w kodzie
W głównym ekranie
W trakcie ładowania komponentu ekranu
W wyniku składnik ekranu
Właśnie stworzyłem małą aplikację vue, aby odtworzyć ten sam problem. Działa w moim lokalnym, jak na twoje pytanie. Mam nadzieję, że rozwiąże to również Twój problem .
źródło
Wydaje mi się, że
router.replace
jest to właściwa droga - ale wciąż kilka myśli (niesprawdzonych):Zasadniczo po
$router
zmianie renderuje ładujący komponent do momentu jego emisjiload:stop
, a następnie renderujerouter-view
źródło
To trudne połączenie, biorąc pod uwagę, jak mało wiemy o tym, co dzieje się na trasie ładowania.
Ale...
Nigdy nie musiałem budować trasy ładowania, tylko ładowanie komponentów, które są renderowane na wielu trasach podczas etapu inicjowania / gromadzenia danych.
Jednym z argumentów za brakiem trasy ładowania byłoby to, że użytkownik mógłby potencjalnie przejść bezpośrednio do tego adresu URL (przypadkowo), a następnie wydaje się, że nie miałby wystarczającego kontekstu, aby wiedzieć, gdzie wysłać użytkownika lub jakie działania podjąć. Chociaż może to oznaczać, że w tym momencie popada w trasę błędu. Ogólnie rzecz biorąc, nie jest to świetne doświadczenie.
Innym jest to, że jeśli uprościsz swoje trasy, nawigacja między trasami stanie się znacznie prostsza i będzie działać zgodnie z oczekiwaniami / pożądanymi bez użycia
$router.replace
.Rozumiem, że to nie rozwiązuje pytania w sposób, w jaki pytasz. Ale proponuję przemyśleć tę trasę ładowania.
App
Muszla
Strona główna
Strona wyników
Składnik wyników
Zasadniczo dokładnie ten sam składnik wyników, który już masz, ale jeśli
loading
jest to prawda lub jeśliresults
ma wartość null, jakkolwiek wolisz, możesz utworzyć fałszywy zestaw danych, aby iterować i tworzyć wersje szkieletowe, jeśli chcesz. W przeciwnym razie możesz zachować wszystko tak, jak chcesz.źródło
Inną opcją jest użycie History API .
Po przejściu do ekranu wyników możesz użyć narzędzia ReplaceState do zastąpienia adresu URL w historii przeglądarki.
źródło
Można to zrobić za pomocą
beforeEach
haka routera.To, co musisz zrobić, to zapisać zmienną globalnie lub w localStorage w
loading
komponencie, gdy dane są ładowane (przed przekierowaniem doresults
komponentu):A następnie powinieneś sprawdzić tę zmienną w zaczepie BeforeEach i przejść do właściwego komponentu:
Pamiętaj również, aby po
main
kliknięciu przycisku zapytania (przed routingiem doloading
komponentu) zresetować wartość na wartość false w komponencie:źródło
Ekran ładowania nie powinien być w ogóle kontrolowany przez router vue. Najlepszą opcją jest użycie modalnej / nakładki na ekran ładowania, kontrolowanej przez javascript. Istnieje wiele przykładów vue. Jeśli nie możesz nic znaleźć, vue-bootstrap ma kilka łatwych przykładów do zaimplementowania.
źródło