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

kipris

Ответов: 8

Ответы (8)

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

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

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

ОБНОВЛЕНИЕ

Как заявил @CHANist, router.listen больше не работает, я не знаю, с какой версии он перестал работать, но хорошие новости (как также заявил @CHANist) в том, что мы можем использовать :

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

СТАРЫЙ ответ

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

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

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

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

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

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

импорт {useRouter} из "vue-router";

const router = useRouter ();

router.afterEach ((to, from) => {});

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

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

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

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

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

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

@ Watch ('$ route', {немедленно: true, deep: true})
onUrlChange (newVal: Route) {
    // Некоторое действие
}

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

импорт {Watch} из 'vue-property-decorator';

Изменить: Алкалин очень хорошо подошел к использованию типа маршрута вместо любого:

импорт {Watch} из 'vue-property-decorator';
импортировать {Route} из 'vue-router';

с использованием Vue Router - альтернативный способ, используйте методы beforeRouteLeave after в вашем компоненте, например:



согласно документации VueJs, это называется Navigation Guards проверьте ссылку ниже:

Навигационная защита

Защитный кожух обычно используется для предотвращения случайного выход из маршрута с несохраненными правками. Навигацию можно отменить позвонив по номеру

Защита компонентов:

beforeRouteEnter

beforeRouteUpdate

beforeRouteLeave

  beforeRouteLeave(to, from, next) {
// called when the route that renders this component is about to
// be navigated away from.
// has access to `this` component instance.
 }

смотрите ссылку ниже для получения дополнительной информации:

Защита компонентов

2022 WebDevInsider