Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

vue-router: this.$router.push not working when updating query

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)

enter image description here

like image 535
narupo Avatar asked Oct 24 '18 16:10

narupo


People also ask

How to know if a route has been changed in Vue?

Say you have a component post.vue which is mapped with /post URL. Now if you redirect the user to /post?pid=13, the post.vue component won't mount again if it's already mounted ie. when you are already at /post or /post?pid=12. [1] In this case, you can put a watch on the route to know if the route has been changed.

How to add a new post using vue router push?

However, user can add new post by clicking Add Post button on the application bar that opens a dialog. Once the user clicks add, a request to back-end server is made to save the request. And once successful, user is redirected to the new post using vue router push like below

Is it possible to use query parameters in router push function?

But using query parameters this never happens. As if Vue ignored the router.push (...). Sorry, but this is too generic to review. You said, the URL is updating (“only the query parameter pid in the URL is updated”), which means that the $router.push function just works perfectly fine.

How do I find out what version of vuerouter I'm using?

Are you using hash mode or history mode? history mode. Thanks! Those look like version ranges from package.json, which don’t nail down exactly which versions you’re using. The lock file should contain the actual version, or you could try logging out VueRouter.version.


1 Answers

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}})
like image 61
Niko Peltoniemi Avatar answered Oct 02 '22 16:10

Niko Peltoniemi