VueJS: $router.push not working with query parameters
Solution 1
By changing the approach component data can be updated as per the new query string value. Here is how it can be done.
Rather than trying to push to the same page again with different query string. The query string pid
itself can be watched for change and on update new data can be fetched and the component data can be updated. In NuxtJS(v. 2.10.2) apps, this can be achieved with watchQuery
. watchQuery
is a NuxtJS property which watches changes to a query strings. And once it detects the change, all component methods(asyncData, fetch, validate..) are called. You can read more https://nuxtjs.org/api/pages-watchquery/
As for the solution, pushing to the same page with new query string remains the same.
.then(data => {
if (data) {
this.$router.push({ name: 'post', query: { pid: data.id } });
}
})
However, on the page.vue, where the data is fetched from the server. We need to add watchQuery
property.
watchQuery: ["pid"],
async asyncData(context) {
let response = await context.$axios.$get(
`http://localhost:8080/find/id/${context.route.query.pid}`
);
return { postData: response };
},
data: () => ({
postData: null
})
Now, everytime the query string pid
will change asyncData
will be called. And that is it. An easy fix to updating component data when the query string value change.
Solution 2
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.
watch: {
'$route.path': {
handler (oldUrl, newUrl) {
let PID = this.$route.query.pid
// fetch data for this PID from the server.
// ...
}
}
}
OR
[2] If the component post.vue
is mapped with some route say /post
.
You can also use the lifecycle -> beforeRouteUpdate
provided by vue-router
beforeRouteUpdate (to, from, next) {
let PID = to.query.pid
// fetch data for this PID from the server.
// ...
next()
}
Meena Chaudhary
Updated on June 12, 2022Comments
-
Meena Chaudhary over 1 year
In my NuxtJS(v. 2.10.2) application, I have a URL like below where
pid
is a post's id./post?pid=5e4844e34202d6075e593062
This URL works fine and loads the post as per the value passed to the
pid
query parameter. However, user can add new post by clickingAdd 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 routerpush
like below.then(data => { if (data) { this.$router.push({ path: `/post?pid=${data.id}` }); } })
The problem is, user is not redirected to the new post, only the query parameter
pid
is updated. I suspect VueJS does not acknowledge this as a different URL and hence does nothing.How to fix this?
Update: As an alternative tried the syntax below but getting the same behavior.
this.$router.push({ path: "post", query: { pid: data.id } });