Vuejs: Wydarzenie przy zmianie trasy

150

Na mojej stronie głównej mam listy rozwijane, które wyświetlają się v-show=showpo kliknięciu linku @click = "show=!show"i chcę ustawić, show=falsekiedy zmienię trasę. Doradź mi, proszę, jak to zrealizować.

kipris
źródło

Odpowiedzi:

298

Skonfiguruj obserwator na $routew składniku tak:

watch:{
    $route (to, from){
        this.show = false;
    }
} 

Obserwuje zmiany tras, a po zmianie ustawia wartość showfalse

Vamsi Krishna
źródło
11
I użyj, $route: function(to, from) {jeśli chcesz obsługiwać starsze przeglądarki i nie używasz babel.
Paul LeBeau
ale jak mogę natychmiast zareagować na parametry trasy lub parametry zapytania, jeśli komponent jest najpierw tworzony / inicjowany? Czy zrobiłbym to w utworzonym () lub zamontowanym () lub przed zaczepem cyklu życia RouteUpdate lub gdzie?
user2774480
40

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:

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // react to route changes...
    }
  }
}

Lub użyj funkcji ochrony beforeRouteUpdate wprowadzonej w 2.2:

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

Źródła: https://router.vuejs.org/en/essentials/dynamic-matching.html

Shubham Nigam
źródło
7
Uwaga: beforeRouteUpdatedziała tylko na widoku, który deklaruje metodę, a nie na żadnym komponencie podrzędnym
JeanValjean
34

Na wszelki wypadek, jeśli ktoś szuka, jak to zrobić na maszynie, tutaj jest rozwiązanie

   @Watch('$route', { immediate: true, deep: true })
   onUrlChange(newVal: Route) {
      // Some action
    }

I tak, jak wspomniano w @Coops poniżej, nie zapomnij dołączyć

import { Watch } from 'vue-property-decorator';

Edycja: Alcalyn bardzo dobrze wypowiedział się na temat używania typu trasy zamiast dowolnego

import { Watch } from 'vue-property-decorator';    
import { Route } from 'vue-router';
ATHER
źródło
2
Nie zapomnij dołączyć do importu: import { Prop, Watch } from "vue-property-decorator";
Coops
1
Zajęło mi godziny, zanim w końcu to zrozumiałem, jakaś dokumentacja jest tam?
Ayyash
1
Podobny dokument, który mogę znaleźć: router.vuejs.org/api/#the-route-object Również zamiast używać anytypu, możesz użyć interfejsu Routezimport { Route } from 'vue-router';
Alcalyn
7

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 () .

mounted() {
   /* to be executed when mounted */
},
updated() {
   console.log(this.$route)
}

W celach informacyjnych odwiedź dokumentację .

Niño Angelo Orlanes Lapura
źródło
2
wygląda na to, że działa również przy zmianie trasy :)
Michail Michailidis
4

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.

Melardev
źródło
odrzucono, ponieważ otrzymuję błąd ten. $ router.listen nie jest funkcją
AngJobs na Github
@AngJobsonGithub Cześć, skąd to dzwonisz, to. $ Router będzie dostępny tylko w komponencie Vue, czy dzwonisz z innego miejsca? takie jak fetch ()?
Melardev
Myślę, że wywołanie było w pliku vue, ten router $ jest dostępny, ale nie ma listenfunkcji.
AngJobs na Github
@AngJobsonGithub Musi być wywołany z komponentu Vue, „this” powinno być komponentem Vue, a projekt powinien korzystać z VueRouter
Melardev
0

Inne rozwiązanie dla użytkownika maszynopisu:

import Vue from "vue";
import Component from "vue-class-component";

@Component({
  beforeRouteLeave(to, from, next) {
    // incase if you want to access `this`
    // const self = this as any;
    next();
  }
})

export default class ComponentName extends Vue {}
Delowar Hosain
źródło