10

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 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

.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 } });
Improve this question
3
  • that isn't the way to pass params, try with this Commented Feb 15, 2020 at 20:00
  • 1
    @ChristianCarrillo i tried this.$router.push({ path: "post", query: { pid: data.id } });. But getting the same behavior only the query parameter is updated, page is not redirected. Is it working for you? Commented Feb 15, 2020 at 20:06
  • try with name instead of path, previously set name property in your routes config Commented Feb 16, 2020 at 0:49

6 Answers 6

Reset to default
8

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()
}
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

This worked for me. Want to add here that if you open an email component (say) from clicking on notification bell icon header comp (sey) clicking on a different notification will not refresh the already open email component. Hence used watch as you suggested with a difference. In my case as the method to refresh is in a different component, with its corresponding html etc, used an eventBus to emit a flag which then reached the mounted of email component and refreshed API.
@shivam is it okay to just call router.go () ?
4

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.

Improve this answer

1 Comment

this is very simple put like in routes array { path: "/add-party", name: "add-party", component:AddParty }, and navigate using this this.$router.push({ name: 'add-party', query: { id: Id } });
1

try this solution

.then(data => {
  if (data) {
    this.$router.push({ name: 'post', query: { pid: data.id } });
  }
})

hints:

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

Comments

1

In case anybody was looking for this:

Query parameters specified as a string do not work when passed to a path parameter: router.push({path: 'route?query=params'})

When you want you use them as a string, just pass the whole string as an argument, like so: router.push('route?query=params')

It'll then be automagically picked by router and navigation will happen.

Improve this answer

Comments

0

Use watchQuery property (https://nuxtjs.org/docs/2.x/components-glossary/pages-watchquery)

export default {
  watchQuery: true,
  data: () => ...
}
Improve this answer

Comments

-2

try this :

.then(data => {
  if (data) {
    this.$router.push('/post?pid=' + data.id);
  }
})

hope it works!!!

Improve this answer

2 Comments

Please don't post only code as an answer, but include an explanation what your code does and how it solves the problem of the question. Answers with an explanation are generally of higher quality, and are more likely to attract upvotes.
This is actually what I was looking for!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.