Dans ma page principale, j'ai des listes déroulantes qui s'affichent v-show=show
en cliquant sur le lien @click = "show=!show"
et je veux définir show=false
quand je change d'itinéraire. Conseillez-moi s'il vous plaît comment réaliser cette chose.
vue.js
vuejs2
vue-router
kipris
la source
la source
$route: function(to, from) {
si vous souhaitez prendre en charge les navigateurs plus anciens et n'utilisez pas babel.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:
Ou, utilisez la garde beforeRouteUpdate introduite dans la version 2.2:
Référence: https://router.vuejs.org/en/essentials/dynamic-matching.html
la source
beforeRouteUpdate
ne fonctionne que sur la vue qui déclare la méthode et non sur aucun composant enfantJuste au cas où si quelqu'un cherche comment le faire en tapuscrit, voici la solution
Et oui comme mentionné par @Coops ci-dessous, n'oubliez pas d'inclure
Edit: Alcalyn a fait un très bon point d'utiliser le type Route au lieu d'utiliser n'importe quel
la source
import { Prop, Watch } from "vue-property-decorator";
any
type, vous pouvez utiliser l'interfaceRoute
deimport { 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.
la source
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é () .
Pour votre référence, visitez la documentation .
la source
Une autre solution pour l'utilisateur dactylographié:
la source