具有路由參數的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: { }的相同級別created: { } ， methods: { }等

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

路由保護器更好，但是如果您發現需要使用大量的路由保護器並調用相同的代碼，則它可以起作用，因為它對任何路由更改都會做出反應。