Vuejs: Wydarzenie przy zmianie trasy

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ć.

Skonfiguruj obserwator na $routew składniku tak:

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

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

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

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';

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ę .

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.

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 {}