Vue-router 共享组件，路由参数更改为过滤结果

Question

我正在尝试使用路由参数动态过滤单个组件中的结果，但即使在 Vue-router 的beforeEnter防护中，它也只在最初进入组件时检测到更改：

{
  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

您可以使用

beforeRouteUpdate组件内防护：

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

Answer 2

另一种方法是使用它：

注意：将此代码与created: { }、methods: { }等放在同一级别

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

路由

防护更好，但如果你发现你需要使用很多它们并调用相同的代码，那么这可以代替，因为它会对任何路由更改做出反应。