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

134

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

kipris
источник

Ответы:

266

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

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

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

Вамси Кришна
источник
11
И используйте, $route: function(to, from) {если вы хотите поддерживать старые браузеры и не используете babel.
Paul LeBeau
но как я могу немедленно отреагировать на параметры маршрута или параметры запроса, если компонент сначала создается / инициализируется? Сделал бы я это в обработчике жизненного цикла created (), смонтированном () или beforeRouteUpdate или где?
user2774480
38

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

Шубхам Нигам
источник
6
Примечание: beforeRouteUpdateработает только с представлением, которое объявляет метод, а не с каким-либо дочерним компонентом
Жан Вальжан
30

На всякий случай, если кто-то ищет, как это сделать в машинописном тексте, вот решение.

   @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';
Ather
источник
1
Не забудьте включить в импорте: import { Prop, Watch } from "vue-property-decorator";
Coops
1
Мне потребовались часы, чтобы наконец понять это, есть ли документация?
Ayyash
1
Аналогичный документ, который я могу найти: router.vuejs.org/api/#the-route-object Также вместо использования anyтипа вы можете использовать интерфейс Routeотimport { Route } from 'vue-router';
Alcalyn
3

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

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

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

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

Melardev
источник
3

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

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

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

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

Ниньо Анджело Орланес Лапура
источник
0

Другое решение для пользователя машинописного текста:

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 {}
Делоуар Хосейн
источник