VueRouter - как сбросить определенное состояние при каждом изменении маршрута - PullRequest
Новая
       4

VueRouter - как сбросить определенное состояние при каждом изменении маршрута

0 голосов
/ 13 марта 2020

У меня есть следующее Base.vue (для простоты сокращено): 

<template lang="html">
  <!-- Start Template Root Div -->
  <div class="">
    <router-view
      v-on:modalToggled="scrollYDisabled = !scrollYDisabled"
    />
  </div>
  <!-- End Template Root Div -->
</template>

<script>
export default {
  name: "Base",
  components: {
    // Initialise components here:
  },
  // All props arguments to contain default factory functions, and required bool.
  props: {
    someBoolean: {
      type: Boolean,
      default: () => false,
      required: false
    }
  },
  // Data is an arrow function returning an object:
  data: () => ({
    someVaribale: false
  }),
  // Computed Properties:
  computed: {},
  // Component Watchers
  watch: {},
  // Component Methods:
  methods: {},
  // Lifecycle Hooks:
  beforeCreate: () => {},
  created: () => {},
  beforeMount: () => {},
  mounted: () => {},
  beforeUpdate: () => {},
  updated: () => {},
  beforeDestroy: () => {},
  destroyed: () => {}
};
</script>

Как вы можете видеть, в моей data() настройке есть логическое значение someVaribale, которым я бы хотел быть установить false при изменении маршрута ...

Каков наилучший способ достижения этого, желательно без запутывания URL-адреса и обеспечения максимально возможной производительности ...?

1 Ответ

2 голосов
/ 13 марта 2020

Вы можете использовать Наблюдаемое свойство Vue для отслеживания изменений в вашем маршруте, например: 

watch: {
    $route(to, from) {
      console.log("route changed");
      this.someVariable = false;
    }
  }

Подробнее об объекте маршрута в документации .

...