Vuejs: Подія щодо зміни маршруту

На головній сторінці у мене є спадні місця, які відображаються v-show=show, натиснувши на посилання, @click = "show=!show"і я хочу встановити, show=falseколи я міняю маршрут. Порадьте, будь ласка, як усвідомити цю річ.

Налаштуйте спостерігача на $routeкомпонент у такому:

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

Це спостерігається за зміною маршруту і при зміні встановлює showзначення false

Якщо ви використовуєте v2.2.0, доступний ще один варіант виявлення змін у $-маршрутах.

Щоб реагувати на зміни парам в одному і тому ж компоненті, ви можете просто переглянути об’єкт $ route:

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

Або скористайтеся захистом beforeRouteUpdate, введеним у 2.2:

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

Довідка: https://router.vuejs.org/en/essentials/dynamic-matching.html

Просто випадок, якщо хтось шукає, як це зробити в машинописі, ось рішення

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

І так, як зазначено нижче @Coops, будь ласка, не забудьте включити

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

Редагувати: Алькалін дуже вдало використав тип маршруту замість будь-якого

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

Наведені вище відповіді є кращими, але просто для повноти, коли ви знаходитесь в компоненті, ви можете отримати доступ до об’єкту історії всередині VueRouter за допомогою: this. $ Router.history. Це означає, що ми можемо слухати зміни за допомогою:

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

Я думаю, що це в основному корисно при використанні разом із цим. $ Router.currentRoute.path Ви можете перевірити, про що я говорю про розміщення debugger

інструкція у вашому коді та почніть грати з консолі Chrome DevTools.

Охотник з глибоким варіантом не працював для мене.

Натомість я використовую оновлений () гачок життєвого циклу, який виконується щоразу, коли дані компонента змінюються. Просто використовуйте його, як і з монтованим () .

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

Для ознайомлення відвідайте документацію .

Ще одне рішення для користувача машинопису:

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