$router.push({query: this.myarray}) not updating the URL

[kvdmolen]

Vue.js / vue-router versions

2.1.2

Reproduction Link

http://jsfiddle.net/ub9e33fm/2/

Steps to reproduce

1. Click first link
2. Click second link: see the difference in printed vars

What is Expected?

Clicking the second link will also update this.$route.query

What is actually happening?

this.$route.query is not updated

[znck]

$route.query is updated on next click. Either click twice on second link or after clicking second link, click first link.

[anishdcruz]

@znck any possible hack for this issue?

[znck]

/ping @posva Could you fix this? Or share a hack!

[fnlctrl]

Seems like a reactivity issue for $route.query. A quick workaround is to pass a copied array each time using arr.slice()
http://jsfiddle.net/gtrasncw/

[kvdmolen]

Unfortunately, the problem remains when property {name} is added to route.push() method:

http://jsfiddle.net/ub9e33fm/12/

Version

2.7.0 (Edge)

Reproduce

1. Click first link (?q=foo)
2. Click second link (?=foo,bar)

See the $route.query not being updated with bar

3. Click second link again. Now you see the updates.
4. Remove name: 'home' from both this.$router.push lines
5. Rerun. Now it works.

[adntin]

if this.$router.push query of parameter is array , Could you fixed this? @kvdmolen

[javoski]

Just as @fnlctrl said, pass a copied array instead of the direct reference.

[timpalac]

I've just fallen back to using plain Javascript to update the URL after this.$router.push({ query: updatedQuery }), as cloning the object/array doesn't seem to work for me on v3.0.1.

For all those searching in vain, here's the workaround:
window.history.pushState({}, '', 'index.html#/viewName?queryParam=' + this.$route.query.queryParam;

It's not the most glamorous of solutions but it works. I can, moving forward, share the URL and with some changes, return to the view I specified.