Как настроить watcher для роутера i vue

Question

Я новичок в vue и не могу решить свою проблему с VueRouter.

У меня есть основной компонент приложения, такой как

<template>
 <div>
  <Header />
  <router-view />
  <Footer />
 </div>
</template>

Один из моих компонентов маршрутизатора имеет функцию для получения данных из базы данных.

import axios from 'axios';

export default {
    name: 'ComponentName',
  data() {
    return {
      dataFromDatabase: []
    }
  },
  methods: {
    getData: function() {
      // Axios get function  to get data from database and add it to this.dataFromDatabase array
    }
  },
  created() {
    this.getData();
  }
}

Данные основаны на URL параметры, и это должно быть изменено при нажатии на ссылку, которая находится в заголовке или в других местах в целом приложении. Проблема в том, что он не может измениться, если компонент не будет перезагружен. Я знаю, что проблема в том, что функция вызывается после создания компонента и не вызывается снова.

Итак, мой вопрос: Есть ли способ наблюдать за изменениями URL-параметров (добавляя это. Функция $ route.params.param to watch () не работает). Возможно, есть лучший способ настроить мои маршруты или другой способ вызова функции, кроме функции create (), или, возможно, компонент будет перезагружаться при каждом изменении ссылки. Как я уже сказал, ссылки на это могут быть везде, даже в компонентах, которые не установлены в Router

Answer 1

Вам, вероятно, просто нужны часы, которые, кстати, не функция, а объект с методами внутри

watch: {
  '$route'() {
    // do something
  }
}

Answer 2

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

watch: {
  '$route': {
    immediate: true,
    handler(newValue, oldValue) {
      // ...
    }
  }
}