CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvue-router
SPQRInc
SPQRInc

Reputation: 198

Next() is not being called on beforeRouteUpdate using the same component

I am using the same vue-component to display data that I'm fetching with axios. After clicking on a link the ajax-request is fetching new data.

But if the component is already loaded and the user clicks another link to load different data, the next()-method is not called.

Check out my codepen to see what I mean. There should be an alert showing. If you click a link for the first time, it does. If you switch to another link, it does not.

https://codepen.io/spqrinc/pen/YzXGGGL

Upvotes: 3

Views: 1051

Answers (1)

Dan
Dan

Reputation: 63099

From the docs:

Note that beforeRouteEnter is the only guard that supports passing a callback to next. For beforeRouteUpdate and beforeRouteLeave, this is already available, so passing a callback is unnecessary and therefore not supported

So the next() in beforeRouteUpdate can't take a callback because you already have access to the instance in this. Anything you would have done with vm in that callback can be done without it using this:

beforeRouteUpdate(to, from, next) {
  alert("Reloaded");
  // `this` works
  next();
}

Upvotes: 2

Related Questions