Vuejs: événement sur le changement d'itinéraire

Dans ma page principale, j'ai des listes déroulantes qui s'affichent v-show=showen cliquant sur le lien @click = "show=!show"et je veux définir show=falsequand je change d'itinéraire. Conseillez-moi s'il vous plaît comment réaliser cette chose.

Configurez un observateur sur le $routedans votre composant comme ceci:

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

Cela observe les changements de route et une fois modifié, définit showsur false

Si vous utilisez la v2.2.0, il existe une autre option disponible pour détecter les changements dans $ routes.

Pour réagir aux changements de paramètres dans le même composant, vous pouvez simplement regarder l'objet $ route:

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

Ou, utilisez la garde beforeRouteUpdate introduite dans la version 2.2:

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

Référence: https://router.vuejs.org/en/essentials/dynamic-matching.html

Juste au cas où si quelqu'un cherche comment le faire en tapuscrit, voici la solution

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

Et oui comme mentionné par @Coops ci-dessous, n'oubliez pas d'inclure

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

Edit: Alcalyn a fait un très bon point d'utiliser le type Route au lieu d'utiliser n'importe quel

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

Les réponses ci-dessus sont les meilleures, mais juste pour être complet, lorsque vous êtes dans un composant, vous pouvez accéder à l'objet historique à l'intérieur du VueRouter avec: this. $ Router.history. Cela signifie que nous pouvons écouter les changements avec:

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

Je pense que cela est principalement utile lorsqu'il est utilisé avec ceci. $ Router.currentRoute.path Vous pouvez vérifier de quoi je parle de placer un debugger

dans votre code et commencez à jouer avec la console Chrome DevTools.

Watcher avec l'option profonde n'a pas fonctionné pour moi.

Au lieu de cela, j'utilise le hook de cycle de vie updated () qui est exécuté à chaque fois que les données du composant changent. Utilisez-le simplement comme vous le faites avec monté () .

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

Pour votre référence, visitez la documentation .

Une autre solution pour l'utilisateur dactylographié:

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