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

路由防护器更好，但是如果您发现需要使用大量的防护器并调用相同的代码，则可以对路由变化做出反应，从而代替它。

具有路由参数的Vue-Router共享组件更改为过滤结果

2 个答案: