Vue-router: Router's $route object not updating on query strings alone

[creativeesprit]

Versions

vue 2.0.3
vue-router 2.0.1
vuex: 2.0.0
vuex-router-sync: 3.0.0

Issue

I am using $router.push to update a paginated list page, therefore have the following code:

changePage(page) { let data = this.$route.query; data['page'] = page; this.$router.push({ path : '/list', query: data }); }

This I would have imagined would trigger an update in:

watch: { $route() { console.log('updated route'); } }

However this does not.
On researching I noticed that after triggering this.$route.push), console logging $route.params.query.page shows it has actually updated, however what is not updating is $route.fullPath and I'm guessing the watcher is looking for changes in this property.

Can you confirm whether this is bug, or how it is actually supposed to work?

Thanks

[creativeesprit]

Just to add/reiterate, $route.fullPath does update when pushing changes where params are updated, for example. going from / to /list, it works fine. The problem lies only when trying to update query strings.

[fnlctrl]

Hi, thanks for filling this issue. Please follow the Issue Reporting Guidelines and provide a live reproduction on jsfiddle, codepen etc. Thanks!

[creativeesprit]

@fnlctrl, apologies!

Example: Fiddle

[fnlctrl]

You're directly mutating $route, which doesn't trigger a transition. Please copy the object instead : https://jsfiddle.net/fnlCtrl/gd6rvxt7/

[am1stad]

isn't <router-link> supposed to handle this sort of change? I'm having same problem for pagination where /?page=1 and /?page=2 links aren't updating the component.

<router-link :to="{ name: 'home', query: { page: page }}">{{page}}</router-link>

[kelleysy]

I just tried making a copy of the object, and it didn't work for me...do you have any other suggestions?

[sleroy]

I have the same issue with
router-link(class="pure-menu-link" :to="prev_link")
and
prev_link() { return { name: 'index', query: {page: parseInt(this.pageIndex) - 1} } },