Vuejs: Ereignis bei Routenänderung

134

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.

vue.js vuejs2 vue-router

— Kipris
quelle

264

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

— Vamsi Krishna
quelle

11

Und verwenden $route: function(to, from) {Sie diese Option, wenn Sie ältere Browser unterstützen möchten und babel nicht verwenden.

— Paul LeBeau

Aber wie kann ich sofort auf Routenparameter oder Abfrageparameter reagieren, wenn die Komponente zuerst instanziiert / initialisiert wird? Würde ich es in created () oder mount () oder beforeRouteUpdate Lifecycle Hook tun oder wo?

— user2774480

37

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

— Shubham Nigam
quelle

6

Ein Hinweis: beforeRouteUpdatefunktioniert nur in der Ansicht, die die Methode deklariert, und nicht in einer

— untergeordneten

30

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

— BEI IHRER
quelle

3

Gute Arbeit, diese Frage vorwegzunehmen. +1

— Rod Hartzell

1

Vergessen Sie nicht, in den Import aufzunehmen: import { Prop, Watch } from "vue-property-decorator";

— Coops

1

Ich habe Stunden gebraucht, um endlich zu realisieren, dass es da draußen irgendwelche Unterlagen gibt?

— Ayyash

1

Ähnliches Dokument kann ich finden: router.vuejs.org/api/#the-route-object Anstatt den anyTyp zu verwenden, möchten Sie möglicherweise auch die Schnittstelle Routevonimport { Route } from 'vue-router';

— Alcalyn

3

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.

— Melardev
quelle

3

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 .

— Niño Angelo Orlanes Lapura
quelle

0

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

— Delowar Hosain
quelle