Vuejs: Evento na mudança de rota

Na minha página principal, tenho listas suspensas que aparecem v-show=showclicando no link @click = "show=!show"e quero definirshow=false quando altero a rota. Aconselhe-me, por favor, como perceber isso.

Configure um observador no $routecomponente como este:

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

Isso observa as alterações de rota e, quando alterado, define showcomo false

Se você estiver usando a v2.2.0, haverá mais uma opção disponível para detectar alterações nas rotas $.

Para reagir às alterações de parâmetros no mesmo componente, você pode simplesmente observar o objeto $ route:

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

Ou use o protetor beforeRouteUpdate apresentado no 2.2:

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

Referência: https://router.vuejs.org/en/essentials/dynamic-matching.html

Apenas caso alguém esteja procurando como fazê-lo em texto datilografado, aqui está a solução

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

E sim, como mencionado por @Coops abaixo, não esqueça de incluir

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

Edit: Alcalyn fez um bom ponto de usar o tipo de rota em vez de usar qualquer

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

As respostas acima são as melhores, mas apenas para completar, quando você está em um componente, pode acessar o objeto de história dentro do VueRouter com: this. $ Router.history. Isso significa que podemos ouvir as alterações com:

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

Eu acho que isso é útil principalmente quando usado junto com isso. $ Router.currentRoute.path Você pode verificar o que estou falando sobre como colocar um debugger

instruções no seu código e comece a jogar com o Chrome DevTools Console.

O observador com a opção profunda não funcionou para mim.

Em vez disso, uso o gancho do ciclo de vida atualizado (), que é executado toda vez que os dados do componente são alterados. Apenas use-o como você faz com o mount () .

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

Para sua referência, visite a documentação .

Outra solução para o usuário datilografado:

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