Vuejs: Manifestation sur la voie du changement

Dans ma page principale, j'ai des listes déroulantes qui montrent v-show=show en cliquant sur le lien ci - @click = "show=!show" et je veux mettre show=false quand je change de route. Conseillez-moi s'il vous plaît comment réaliser cette chose.

InformationsquelleAutor kipris | 2017-09-25
  1. 150

    Installation d'un watcher sur le $route dans votre composant comme ceci:

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

    Cette observation pour les changements de route et une fois modifiées ,jeux de show de faux

    • Et l'utilisation $route: function(to, from) { si vous souhaitez soutenir les anciens navigateurs, et ne sont pas à l'aide de babel.
    • Très gentil, mon ami!
    • C'est exactement ce que je cherchais!
    • vous êtes génial!
    InformationsquelleAutor Vamsi Krishna
  2. 25

    Si vous utilisez v2.2.0 alors il existe une option de plus disponibles pour détecter des changements dans $routes.

    De réagir à params changements dans le même composant, vous pouvez tout simplement regarder les $objet route:

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

    Ou, utilisez la beforeRouteUpdate garde introduit en 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

    • Une remarque: beforeRouteUpdate ne fonctionne que sur la vue qui déclare la méthode et non pas sur n'importe quel composant enfant
    InformationsquelleAutor Shubham Nigam
  3. 4

    Juste au cas ou si quelqu'un est à la recherche pour savoir comment faire en caractères d'imprimerie voici la solution

       @Watch('$route', { immediate: true, deep: true })
   onUrlChange(newVal: any) {
      //Some action
    }
    InformationsquelleAutor ATHER
  4. 1

    Les réponses ci-dessus sont la meilleure, mais juste pour être complet, lorsque vous êtes dans un composant, vous pouvez accéder à l'historique de l'objet à l'intérieur de la VueRouter avec:
    c'.$routeur.l'histoire.
    Cela signifie que nous pouvons écouter des changements avec:

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

    Je pense que c'est surtout utile lorsqu'il est utilisé avec cela.$routeur.currentRoute.chemin
    Vous pouvez vérifier ce que je suis en train de parler de placer un debugger

    instruction dans votre code et commencer à jouer avec le Chrome DevTools de la Console.

    InformationsquelleAutor Melardev
  5. 0

    Watcher avec la profonde option ne fonctionne pas pour moi.

    Au lieu de cela, j'utilise mise à jour() cycle de vie de crochet qui est exécuté à chaque fois que le composant est des modifications de données.
    Juste l'utiliser comme vous le faites avec monté().

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

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

    InformationsquelleAutor Niño Angelo Orlanes Lapura