Vuejs: evento sobre cambio de ruta


134

En mi página principal tengo menús desplegables que se muestran v-show=showal hacer clic en el enlace @click = "show=!show"y quiero configurarlos show=falsecuando cambio la ruta. Avísame por favor cómo realizar esto.

Respuestas:


266

Configure un observador en el $routecomponente de esta manera:

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

Esto observa los cambios de ruta y, cuando se cambia, se establece showen falso


11
Y úselo $route: function(to, from) {si desea admitir navegadores más antiguos y no está usando babel.
Paul LeBeau

pero, ¿cómo puedo reaccionar de inmediato para enrutar parámetros o consultar parámetros si el componente se instancia / inicializa al principio? ¿Lo haría en el gancho del ciclo de vida creado () o montado () o antes de la ruta de actualización o dónde?
user2774480

37

Si está utilizando v2.2.0, entonces hay una opción más disponible para detectar cambios en $ routes.

Para reaccionar a los cambios de parámetros en el mismo componente, simplemente puede mirar el objeto $ route:

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

O utilice el protector beforeRouteUpdate presentado en 2.2:

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

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


66
Una nota: beforeRouteUpdatesolo funciona en la vista que declara el método y no en ningún componente secundario
JeanValjean

30

Solo en caso de que alguien esté buscando cómo hacerlo en mecanografiado, esta es la solución

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

Y sí, como lo menciona @Coops a continuación, no olvide incluir

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

Editar: Alcalyn hizo un muy buen uso del tipo de ruta en lugar de usar cualquier

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

3
Buen trabajo anticipando esta pregunta. +1
Rod Hartzell

1
No olvide incluir en la importación: import { Prop, Watch } from "vue-property-decorator";
Coops

1
Me tomó horas darme cuenta de eso, ¿hay alguna documentación por ahí?
Ayyash

1
Documento similar que puedo encontrar: router.vuejs.org/api/#the-route-object También en lugar de usar el anytipo, es posible que desee usar la interfaz Routedeimport { Route } from 'vue-router';
Alcalyn

3

Las respuestas anteriores son mejores, pero solo para completar, cuando está en un componente puede acceder al objeto de historial dentro del VueRouter con: this. $ Router.history. Eso significa que podemos escuchar los cambios con:

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

Creo que esto es principalmente útil cuando se usa junto con este. $ Router.currentRoute.path Puede verificar de qué estoy hablando acerca de colocar un debugger

instrucciones en su código y comience a jugar con la Consola Chrome DevTools.


3

El vigilante con la opción profunda no funcionó para mí.

En cambio, uso el enlace de ciclo de vida actualizado () que se ejecuta cada vez que cambian los datos del componente. Solo úsalo como lo haces con montado () .

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

Para su referencia, visite la documentación .


0

Otra solución para el usuario mecanografiado:

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 {}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.