Vuejs: Rota değişikliğindeki olay

Ana sayfamda v-show=show, bağlantıya tıklayarak gösterilen açılır menülerim var @click = "show=!show"ve show=falserotayı ne zaman değiştireceğimi ayarlamak istiyorum . Lütfen bana bu şeyi nasıl gerçekleştireceğimi tavsiye edin.

Bileşeninizde şu şekilde bir izleyici$route kurun:

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

Bu, rota değişikliklerini gözlemler ve değiştirildiğinde showyanlış olarak ayarlanır

V2.2.0 kullanıyorsanız, $ rotalardaki değişiklikleri algılamak için bir seçenek daha vardır.

Aynı bileşendeki parametre değişikliklerine tepki vermek için $ route nesnesini izlemeniz yeterlidir:

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

Veya, 2.2'de tanıtılan beforeRouteUpdate korumasını kullanın:

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

Referans: https://router.vuejs.org/en/essentials/dynamic-matching.html

Sadece daktiloda nasıl yapılacağını arayan biri varsa, işte çözüm burada

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

Ve evet, aşağıda @Coops'ta belirtildiği gibi, lütfen eklemeyi unutmayın

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

Düzenleme: Alcalyn, herhangi bir yol kullanmak yerine Rota tipini kullanmakta çok iyi bir noktaya geldi.

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

Yukarıdaki yanıtlar daha iyidir, ancak tamlık için, bir bileşenin içindeyken VueRouter içindeki geçmiş nesnesine şu şekilde erişebilirsiniz: this. $ Router.history. Bu, değişiklikleri şu şekilde dinleyebileceğimiz anlamına gelir:

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

Bunun esas olarak bununla birlikte kullanıldığında yararlı olduğunu düşünüyorum. $ Router.currentRoute.path debugger

kodunuzda talimat verin ve Chrome DevTools Konsolu ile oynamaya başlayın.

Derin seçeneği olan gözlemci benim için işe yaramadı.

Bunun yerine, bileşenin verileri her değiştiğinde çalıştırılan updated () yaşam döngüsü kancasını kullanıyorum . Mount () ile yaptığınız gibi kullanın .

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

Referans için dokümanları ziyaret edin .

Daktilo kullanıcısı için başka bir çözüm:

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