The right way to trigger a funciton on route change

[karchung0930]

I need to trigger a function when the user is going/switching from to another route, and I found this on Stack Overflow: https://stackoverflow.com/a/69275106

Is this the correct and most efficient way?

[brunnerh]

There are various lifecycle functions that can be used:

• onNavigate
• beforeNavigate
• afterNavigate

(This only applies to SvelteKit, so probably should have been over there.)

[karchung0930]

Would you mind to give an exmaple like how to use it? Because it doesn't work if I try:

import { onNavigate } from '$app/navigation';

onNavigate(() => {
    // Do something like updating the varibale
    test = true;
});

[brunnerh]

It should work, unless it's a full page navigation as pointed out by the docs.
Note that the function cannot be used to update the current page if you are navigating away.
onNavigate is probably mostly intended to be used in layouts which stick around after the navigation.

To update the current page before it unloads you can use beforeNavigate, the DOM will still be updated after this runs.