How to Reset Filters with Query Params Without Triggering Navigation Guard Loops?

[loic-bellinger]

Hello,

I have a design issue with my Vue Router setup. I’m working on dashboard pages that contain dynamic filters, which are stored in a Pinia store. The query params in the URLs of my dashboards are updated to reflect the active filters. This allows filters to persist when the page is reloaded or if the URL with query params is shared with another user. I’m using a watcher in my Pinia store to handle this:

const queryParams = computed(() => {
  return {
    themes: selectedThemesKeys.value.join(),
    sources: selectedSourcesKeys.value.join(),
    presetPeriod: selectedPresetPeriod.value,
    customStart: customPeriod.value.start,
    customEnd: customPeriod.value.end,
  }
})

watch(queryParams, () => {
  router.replace({ query: queryParams.value })
})

Now, I would like to reset the filters when the user navigates to a new dashboard. I tried adding something like this in a router.beforeEach guard:

router.beforeEach(async (to, from) => {
  if (from.name && to.name !== from.name) {
    const filtersStore = useFiltersStore()
    filtersStore.$reset()
  }
})

The issue is that router.replace triggers the navigation guards (like beforeEach), and when my guard executes, the watcher is triggered again. This creates either an infinite loop or stops the navigation entirely.

I believe using history.replaceState would not be the cleanest solution... Something like that.

watch(
  queryParams,
  (query) => {
    const newRouteLocation = router.resolve({ query })
    history.replaceState(history.state, '', newRouteLocation.fullPath)
  }
)

How can I properly reset the filters when switching dashboards ?

Thank you for your help!

[posva]

Since you are in a navigation guard, you can trigger a redirect:

router.beforeEach(async (to, from) => {
  if (from.name && to.name !== from.name && to.name === 'dashboard' && !to.redirectedFrom) {
    return { ...to, query: {} }
  }
})

[loic-bellinger]

Seems that it also triggers an infinite loop

[Vue Router warn]: Detected a possibly infinite redirection in a navigation guard when going from "/" to "/dashboard-1". Aborting to avoid a Stack Overflow.
Are you always returning a new location within a navigation guard? That would lead to this error. Only return when redirecting or aborting, that should fix this. This might break in production if not fixed.

[posva]

True, it's missing a check for that. I edited my comment

[loic-bellinger]

Thank you so much — everything works now!

If I may, I’d like to ask for your thoughts on a related design question :

Would you recommend centralizing this logic in my Pinia store (as I am reseting a store state), or does it make more sense to keep it in the router file alongside my other beforeEach guards?

router.beforeEach(async (to, from) => {
  if (from.name && to.name !== from.name && to.meta.hasFilters && !to.redirectedFrom) {
    const filtersStore = useFiltersStore()
    filtersStore.$reset()
    return { ...to, query: {} }
  }
})

Thank you again for your valuable insights — I hope I’m not taking too much of your time!

[posva]

Most of the time, I wouldn't put that in the store. I would put the logic in a composable but there are scenarios where putting the data in a store makes sense. After all, stores are composable singletons. So, it's probably more than fine to go with that approach.