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)
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.
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
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.
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.
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}})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With