Общий компонент Vue-router с изменениями параметров маршрута для фильтрации результатов

Question

Я пытаюсь динамически фильтровать результаты в одном компоненте с параметрами маршрута, но даже в beforeEnter guard Vue-router он обнаруживает изменения только при первоначальном входе в компонент:

{
  path: '/ants/:filter',
  name: 'ants.index',
  beforeEnter: (to, from, next) => {
    next(store.getters['ants/filter'](to.params.filter))
  },
  component: () => import(`@/pages/ants/Index.vue`)
}

В настоящее время есть три фильтра. to.params.filter обнаруживает правильный фильтр при первом входе в компонент, но после этого он не обнаруживает изменения параметров маршрута при повторном использовании этого же компонента. Я был бы согласен с повторной загрузкой компонента, хотя фильтр фильтрует состояние, поэтому это должен быть эффективный обмен данными. Мне просто неясно, как я могу обнаружить изменение параметров маршрута. Любые другие возможные решения также приветствуются! Спасибо:)

Answer 1

Альтернативным способом было бы использовать это:

Примечание. Установите этот код на том же уровне, что и created: { }, methods: { } и т. Д.

.

watch: {
  '$route' (to, from) {
    // Your code.
  }
}

Охранники маршрута лучше, но если вы обнаружите, что вам нужно использовать их много и вызывать один и тот же код, тогда это может сработать, поскольку реагирует на любые изменения маршрута.

Answer 2

Вы можете использовать beforeRouteUpdate встроенную защиту:

beforeRouteUpdate: (to, from, next) {
  next(store.getters['ants/filter'](to.params.filter))
}