Vuejs: evento sobre cambio de ruta

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.

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

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

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

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.

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 .

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