Vuejs: evento sul cambio di rotta


134

Nella mia pagina principale ho dei menu a discesa che vengono visualizzati v-show=showfacendo clic sul collegamento @click = "show=!show"e voglio impostare show=falsequando cambio percorso. Avvisami per favore come realizzare questa cosa.

Risposte:


266

Imposta un watcher sul $routenel tuo componente in questo modo:

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

Questo osserva per le modifiche del percorso e, quando modificato, impostato showsu false


11
E usalo $route: function(to, from) {se vuoi supportare i browser più vecchi e non stai usando babel.
Paul LeBeau,

ma come posso reagire immediatamente per instradare i parametri o interrogarli se il componente viene inizialmente istanziato / inizializzato? Lo farei in hook creato () o montato () o prima di RouteUpdate o dove?
user2774480

37

Se si utilizza v2.2.0, è disponibile un'altra opzione per rilevare le modifiche in $ rotte.

Per reagire alle modifiche dei parametri nello stesso componente, puoi semplicemente guardare l'oggetto $ route:

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

In alternativa, utilizzare la protezione beforeRouteUpdate introdotta in 2.2:

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

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


6
Una nota: beforeRouteUpdatefunziona solo sulla vista che dichiara il metodo e non su qualsiasi componente figlio
JeanValjean

30

In caso, qualcuno sta cercando come farlo in dattiloscritto, ecco la soluzione

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

E sì, come indicato da @Coops di seguito, non dimenticare di includere

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

Modifica: Alcalyn ha sottolineato molto bene l'utilizzo del tipo di percorso invece di usarne uno

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

1
Non dimenticare di includere nell'importazione: import { Prop, Watch } from "vue-property-decorator";
Coops,

1
Mi ci sono volute ore per rendermene finalmente conto, qualche documentazione là fuori?
Ayyash,

1
Doc simile che posso trovare: router.vuejs.org/api/#the-route-object Inoltre, invece di utilizzare il anytipo, potresti voler utilizzare l'interfaccia Routediimport { Route } from 'vue-router';
Alcalyn,

3

Le risposte di cui sopra sono le migliori, ma solo per completezza, quando ci si trova in un componente è possibile accedere all'oggetto della cronologia all'interno di VueRouter con: this. $ Router.history. Ciò significa che possiamo ascoltare i cambiamenti con:

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

Penso che questo sia utile soprattutto se usato insieme a questo. $ Router.currentRoute.path Puoi controllare di cosa sto parlando posizionando un debugger

istruzioni nel codice e inizia a giocare con la console DevTools di Chrome.


3

L'osservatore con l'opzione profonda non ha funzionato per me.

Al contrario, utilizzo l' hook aggiornato () che viene eseguito ogni volta che i dati del componente cambiano. Usalo come fai con montato () .

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

Per riferimento, visitare la documentazione .


0

Un'altra soluzione per l'utente dattiloscritto:

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 {}
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.