I want to update query on url. But, $router.push does not updating url. disp is different value for each call. Why?

handle: function(disp) {
    let route = Object.assign({}, this.$route);
    route.query.disp = disp;
    this.$router.push(route);
},

versions.

"vue": "^2.5.17",
"vue-router": "^3.0.1",

route (console.log)

I want to update query on url. But, $router.push does not updating url. disp is different value for each call. Why?

handle: function(disp) {
    let route = Object.assign({}, this.$route);
    route.query.disp = disp;
    this.$router.push(route);
},

versions.

"vue": "^2.5.17",
"vue-router": "^3.0.1",

route (console.log)

• javascript
• vue.js
• vue-router

• can you do a console.log of route before the push() to check values of the object – Andrei Commented Oct 24, 2018 at 16:48
• I add picture of console.log with route. – user4829254 Commented Oct 24, 2018 at 17:07
• not sure, everything seems to be correct overall, have you tried to navigate by using an object directly? this.$router.push({ name: 'ponent name'}) to make sure router is configured correctly – Andrei Commented Oct 24, 2018 at 17:12
• I see console.log(this.$route.query.disp);. $route.query.disp is updated. But url is not updating. – user4829254 Commented Oct 24, 2018 at 17:56

1 Answer 1

You shouldn't try to push to the route object. Instead you should use one of these:

// literal string path
router.push('home')

// object
router.push({ path: 'home' })

// named route
router.push({ name: 'user', params: { userId: 123 }})

// with query, resulting in /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

In your case:

this.$router.push({path: this.$route.path, query: {disp: disp}})