Vuejs: событие по изменению маршрута

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

ОТВЕТЫ

Ответ 1

Настройте наблюдателя на $route в вашем компоненте следующим образом:

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

Это наблюдает за изменения маршрута и при изменении, наборы show ложь

Ответ 2

Если вы используете 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

Ответ 3

Просто если кто-то ищет, как это сделать в машинописи, вот решение

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

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

import { Prop, Watch } from "vue-property-decorator";

Ответ 4

Вышеуказанные ответы лучше, но для полноты: когда вы находитесь в компоненте, вы можете получить доступ к объекту истории внутри VueRouter с помощью: this. $ Router.history. Это означает, что мы можем слушать изменения с:

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

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

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

Ответ 5

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

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

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

Для справки посетите документацию.