Na mojej stronie głównej mam listy rozwijane, które wyświetlają się v-show=show
po kliknięciu linku @click = "show=!show"
i chcę ustawić, show=false
kiedy zmienię trasę. Doradź mi, proszę, jak to zrealizować.
vue.js
vuejs2
vue-router
kipris
źródło
źródło
$route: function(to, from) {
jeśli chcesz obsługiwać starsze przeglądarki i nie używasz babel.Jeśli używasz wersji 2.2.0, dostępna jest jeszcze jedna opcja wykrywania zmian w $ route.
Aby zareagować na zmiany parametrów w tym samym komponencie, możesz po prostu obejrzeć obiekt $ route:
Lub użyj funkcji ochrony beforeRouteUpdate wprowadzonej w 2.2:
Źródła: https://router.vuejs.org/en/essentials/dynamic-matching.html
źródło
beforeRouteUpdate
działa tylko na widoku, który deklaruje metodę, a nie na żadnym komponencie podrzędnymNa wszelki wypadek, jeśli ktoś szuka, jak to zrobić na maszynie, tutaj jest rozwiązanie
I tak, jak wspomniano w @Coops poniżej, nie zapomnij dołączyć
Edycja: Alcalyn bardzo dobrze wypowiedział się na temat używania typu trasy zamiast dowolnego
źródło
import { Prop, Watch } from "vue-property-decorator";
any
typu, możesz użyć interfejsuRoute
zimport { Route } from 'vue-router';
Watcher z opcją deep nie zadziałał dla mnie.
Zamiast tego używam zaktualizowanego haka cyklu życia (), który jest wykonywany za każdym razem, gdy zmieniają się dane składnika. Po prostu używaj go tak, jak robisz z mount () .
W celach informacyjnych odwiedź dokumentację .
źródło
Powyższe odpowiedzi są lepsze, ale tylko dla kompletności, kiedy jesteś w komponencie, możesz uzyskać dostęp do obiektu historii w VueRouter za pomocą: this. $ Router.history. Oznacza to, że możemy słuchać zmian za pomocą:
this.$router.listen((newLocation) =>{console.log(newLocation);})
Myślę, że jest to przydatne głównie w połączeniu z tym. $ Router.currentRoute.path Możesz sprawdzić, o czym mówię o umieszczaniu
debugger
instrukcji w kodzie i zacznij grać w konsoli Chrome DevTools.
źródło
listen
funkcji.Inne rozwiązanie dla użytkownika maszynopisu:
źródło