[Vuejs]-Vue/Quasar: how to add a persitent query param

by

1👍

When you return anything other than next() from a navigation guard you are invalidating the current navigation and causing a new navigation to be performed. Any new navigation needs to pass all navigation guards. next(toWithQuery) is always triggering a new navigation which causes router.beforeEach to always run again, repeating infinitely.

I would suggest removing the next parameter. It’s not recommended anymore.

When the navigation is valid, you don’t actually need to return anything

If nothing, undefined or true is returned, the navigation is validated, and the next navigation guard is called.

An example of a working version of your beforeEach guard would be:

router.beforeEach((to, from) => {
  if (!Object.keys(to.query).length && Object.keys(from.query).length > 0) {
    return Object.assign({}, to, { query: from.query })
  }
})

This code adds a query to the to route only if the to route has no query params and the from route does. Otherwise, the navigation is validated. This guard should only run at most two times (once to add the query, once to successfully validate)

👤yoduh

Leave a comment