beforeRouteEnter Callback Invoked Multiple Times

[wdews]

It appears that anytime I set up beforeRouteEnter on certain routes in my app, they get invoked multiple times. Worth noting that these callbacks are asynchronous (async beforeRouteEnter (...)

Working on multiple apps, I've noticed a commonality between the two applications on this behavior: the amount of times the callback for beforeRouteEnter gets invoked aligns with the depth of nested routes.

For example, if the route I'm visiting happens to be nested to a point where a total of 4 <router-view></router-view> components are rendered, the callback, despite being added to the deepest-nested route, will be invoked 4 times.

This could be a coincidence and not necessarily have to do with the number of <router-view></router-view> components that exist in the application, but I thought it might be worth sharing.

Could somebody point me in the right direction? In my development environment, hitting an API endpoint 4x as frequently as I need to is less of a concern. But once we roll this app out to production, that won't do.

Thanks in advance for your help. Let me know if I can provide any specific snippets of my code that would be helpful.

[vue-bot]

Hello, your issue has been closed because it does not conform to our issue requirements. Please use the Issue Helper to create an issue - thank you!

[simplesmiler]

@wdews hi there, I'm sorry the bot is a little succinct (maybe even harsh) with her replies.

What you describe does not look right to me, but I was not able to reproduce it: https://jsfiddle.net/ttvdhy41/5/
If you can provide a minimal reproduction, please feel free to open a new issue with a link to the reproduction. This would make it much easier for us to tell exactly what is going wrong.

[wdews]

Hey @simplesmiler, thanks for your reply. The bot caught me a little off-guard, but I see now how VueJS manages to regulate its issues so efficiently! Haha.

Thanks for looking in to this. I spent some time after the bot closed my issue attempting to reproduce the issue on a smaller scale in JSFiddle with no luck. That led me to look more closely at my codebase. Namely, the router.beforeEach callback I set up.

In my beforeEach callback, I was iterating over matched routes and, depending on whether or not certain conditions were met in the current iteration's route meta, I'd return next(). This was fine, save for the fact that I was iterating over matched routes using Array.some() so I could easily break out of iterating.

Unfortunately, because of the way I was returning next(), it wasn't properly breaking the iterations through the array. I swapped return next(); for next(); and return true; and I'm no longer invoking the "next" method multiple times.

Hopefully this helps someone else that happens to be running in to the same issue! Got a little sad when I realized how silly the issue was in the end.

[wdews]

Really, I shouldn't even be invoking next() from within the .some() callback whatsoever...

[boyet007]

bug?