Vuejs: Ereignis bei Routenänderung

Auf meiner Hauptseite habe ich Dropdowns, die v-show=showdurch Klicken auf den Link angezeigt werden, @click = "show=!show"und ich möchte festlegen, show=falsewann ich die Route ändere. Raten Sie mir bitte, wie Sie dieses Ding realisieren können.

Richten Sie einen Beobachter auf die $routein Ihrer Komponente wie folgt aus :

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

Dies beobachtet Routenänderungen und setzt bei Änderung showauf false

Wenn Sie v2.2.0 verwenden, steht eine weitere Option zur Verfügung, um Änderungen in $ route zu erkennen.

Um auf Parameteränderungen in derselben Komponente zu reagieren, können Sie einfach das $ route-Objekt beobachten:

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

Oder verwenden Sie den in 2.2 eingeführten beforeRouteUpdate-Schutz:

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

Referenz: https://router.vuejs.org/en/essentials/dynamic-matching.html

Nur für den Fall, dass jemand nach einer Möglichkeit sucht, dies in Typoskript zu tun, ist hier die Lösung

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

Und ja, wie von @Coops unten erwähnt, vergessen Sie bitte nicht, dies anzugeben

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

Bearbeiten: Alcalyn legte großen Wert darauf, den Routentyp anstelle eines beliebigen zu verwenden

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

Die obigen Antworten sind die besseren, aber der Vollständigkeit halber können Sie in einer Komponente auf das Verlaufsobjekt im VueRouter zugreifen mit: this. $ Router.history. Das heißt, wir können Veränderungen anhören mit:

this.$router.listen((newLocation) =>{console.log(newLocation);})

Ich denke, dies ist hauptsächlich nützlich, wenn es zusammen mit diesem verwendet wird. $ Router.currentRoute.path Sie können überprüfen, wovon ich spreche, wenn Sie ein platzieren debugger

Anweisungen in Ihrem Code und beginnen Sie mit der Chrome DevTools Console zu spielen.

Beobachter mit der tiefen Option hat bei mir nicht funktioniert.

Stattdessen verwende ich einen aktualisierten () Lebenszyklus-Hook, der jedes Mal ausgeführt wird, wenn sich die Daten der Komponente ändern. Verwenden Sie es einfach wie bei mount () .

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

Weitere Informationen finden Sie in der Dokumentation .

Eine weitere Lösung für Typoskript-Benutzer:

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