How to add a persitent query param

[evil-shrike]

asked on SO as well

I'm trying to add a param into the url so it would persist during navigation. The idea is that it's used on application start to initialize an app state and then is kept in the url. On state changing the param is updated.

First I tried beforeEach with next argument:

    router.beforeEach((to, from, next) => {
      let toWithQuery = Object.assign({}, to, { query: from.query });
      next(toWithQuery);
    });

It caused a "Infinite redirect in navigation guard" error.

Then followed a piece of advise from SO:

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

it works as I needed - adds the persistent argument but it causes infinite recursion (undetectable, so the app just hangs on load) when I call router.push:

router.push({ path: '/configuration' })

(I do it in my App.vue's created hook).

[posva]

The navigation guard you propose should work (I tested it):

router.beforeEach(to => {
  if (!('persistent' in to.query)) {
    return {
      ...to,
      query: {
        ...to.query,
        persistent: 'I am inevitable'
      }
    }
  }
})

Since the return is conditional, it won't face the infinite redirect issue you see with next()