Vuejs: Acara pada perubahan rute

Di halaman utama saya, saya memiliki dropdown yang ditampilkan v-show=showdengan mengklik tautan @click = "show=!show"dan saya ingin mengatur show=falseketika saya mengubah rute. Beri tahu saya bagaimana cara mewujudkan hal ini.

Atur pengamat di $routedalam komponen Anda seperti ini:

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

Ini mengamati perubahan rute dan ketika diubah, disetel showke false

Jika Anda menggunakan v2.2.0 maka ada satu opsi lagi yang tersedia untuk mendeteksi perubahan dalam $ route.

Untuk bereaksi terhadap perubahan params dalam komponen yang sama, Anda cukup menonton objek $ route:

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

Atau, gunakan pelindung beforeRouteUpdate yang diperkenalkan di 2.2:

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

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

Hanya memetikan jika ada yang mencari cara melakukannya dalam naskah di sini adalah solusinya

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

Dan ya seperti yang disebutkan oleh @Coops di bawah ini, jangan lupa sertakan

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

Sunting: Alcalyn membuat titik yang sangat baik menggunakan tipe Route daripada menggunakan apa pun

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

Respons di atas lebih baik, tetapi hanya untuk kelengkapan, ketika Anda berada di komponen Anda dapat mengakses objek sejarah di dalam VueRouter dengan: this. $ Router.history. Itu artinya kita dapat mendengarkan perubahan dengan:

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

Saya pikir ini sangat berguna ketika digunakan bersama dengan ini. $ Router.currentRoute.path Anda dapat memeriksa apa yang saya bicarakan tentang menempatkan debugger

instruksi dalam kode Anda dan mulai bermain dengan Chrome DevTools Console.

Watcher dengan opsi mendalam tidak bekerja untuk saya.

Sebagai gantinya, saya menggunakan kait siklus hidup yang diperbarui () yang dijalankan setiap kali data komponen berubah. Cukup gunakan seperti yang Anda lakukan dengan mount () .

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

Untuk referensi Anda, kunjungi dokumentasi .

Solusi lain untuk pengguna naskah:

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