Вуэйс: Событие при смене маршрута

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

Настроить наблюдатель на $routeв компоненте , как это:

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

Это наблюдает за изменениями маршрута и при изменении устанавливает showзначение false

Если вы используете v2.2.0, то есть еще один вариант для обнаружения изменений в $ routes.

Чтобы отреагировать на изменение параметров в том же компоненте, вы можете просто посмотреть объект $ 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);})

Я думаю, что это в основном полезно при использовании вместе с this. $ Router.currentRoute.path Вы можете проверить, о чем я говорю, о размещении debugger

инструкции в вашем коде и начните играть с Chrome DevTools Console.

Наблюдатель с глубокой опцией у меня не работал.

Вместо этого я использую обработчик жизненного цикла updated (), который запускается каждый раз при изменении данных компонента. Просто используйте его так же, как и с монтируемым () .

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