Vue-router: preventing routing when changing an argument

Question

I try to confirm, leaving the form route not saved, and if the user refuses to cancel the route change.

It mainly works with

beforeRouteLeave: function (to, from, next) { if (!confirm('Leaving form')) next(false); } 

The problem is with the route arguments, for example #/form-path?id=5 - changing the id argument does not cause beforeRouteLeave .

Which hook can be used to prevent changing navigation when changing?

Answer 1

Dynamic route mapping is specifically designed so that different routes or URLs map to the same route or component. Therefore, changing the argument is technically not considered a departure (or change) of the route, therefore beforeRouteLeave does not work.

However , I suggest that you can execute the component that matches the route responsible for detecting changes in the argument. Basically, whenever an argument changes, write down the change and then change it (we hope that the reversal will be fast enough so that the user goes unnoticed), and then ask for confirmation. If the user confirms the change, then use your entry to "cancel" the change, but if the user does not confirm, then save everything as it is (do not change the opposite).

I have not tested this personally, and therefore I can’t guarantee it will work, but I hope it would eliminate any confusion as to which part of the application is responsible for checking which changes.