Leave hook is not called when url Param changes in parameterized Route

[jackiems82]

Hi, I have a problem that the leave hook seems not to be called for routes with parameters when navigating to the "same" route but with different parameter.

router.on(
    '/foo/:id', 
    ({ data }) => console.log('Routing to', data.id),
    { 
        leave: () => console.log('Executing leave hook')
    }
);

router.navigate('/foo/123')
router.navigate('/foo/321')  // leave hook is not called
router.navigate('/home')     // leave hook is called

The same actually happens for query parameters. I would've expected that any navigate call also calls the hooks.

[jackiems82]

So is this a bug or a misconception from my side? Any feedback would be appreciated.

[rjgamble]

Reproduced here for demonstration: https://runkit.com/embed/taaeebzc3mt2

[krasimir]

Hey @jackiems82 @rjgamble,

Navigo checks based on the path passed to the on method. It is basically checking whether '/foo/:id' matches the '/foo/123' and '/foo/321' routes. And they do match. So, it's the same route matching and the leave hook is not fired. Is it possible to implement your logic with after hook.

[rjgamble]

Hey @krasimir,

In our use case, we want to perform some disposal operations when we know we're leaving a page. In our implementation, foo/1234 is a different page to foo/4321 as its a different item.

[krasimir]

I see. In such cases I usually question whether such logic needs to be in the routing layer. Is it possible to shift it in another place.

[jackiems82]

Thank you for the feedback @krasimir. We added some guard handling on top of the leave hook to prevent losing unsaved changes. All of this works great on non-parameterized routes. But for a page where you can display editable documents in tabs it would not work. If you say it should be implemented outside of the general routing logic I need to see how I could implement that in our wrapping logic.
In general I would still consider that as a route change. At least the vue-router does it the same way. Maybe others as well?

[jackiems82]

I just checked that the before hook is always fired. Maybe I can use that for my purposes

[rjgamble]

I see. In such cases I usually question whether such logic needs to be in the routing layer. Is it possible to shift it in another place.

Its a good question. Unfortunately in our case, the routing layer is the only option we have for detecting that navigation event and performing that disposal and cleanup. Not to mention, execution in the hooks already provides us with all the context we need to perform our cleanup.

[jackiems82]

The before hook was not an option because the rendering already started which looked odd. I have a workaround where I use a promise that is resolved by the user in a modal before the actual call to .navigate() happens. No need to rely on any hooks. For my scenario it is sufficient atm. But who knows what comes up later.
@rjgamble We have a wrapper around navigo that we use to interact with it. That also houses that new logic. Maybe that would help in your scenario as well if you not already have something similar.