Ability to intercept a navigation request

[zommerberg]

Describe the problem

I was trying to build a confirmation dialog feature that appears before the user tries to leave the page.

The problem that occurred is that normally in this case we would use beforeunload listener and prevent the navigation event from firing before leaving the page. However, in sveltekit we have client-side routing so this event is not fired.

Currently, there is no good way of handling that.

Describe the proposed solution

My proposed solution is to create a listener that exposes the navigation intent.
Within this intent, we should be able to cancel the navigation and get the required information about the page we are trying to navigate to.

The idea is to create a onBeforeNavigate interceptor that is triggered when we use the following events:

• goto()
• popstate events
• anchor tags clicks

The interceptor could be used in the following way:

<script>
  import { browser } from '$app/env';
  import { onBeforeNavigate } from '$app/navigation';

     if (browser) {
       onBeforeNavigate((navigationIntent) => {

          //the url we are going to navigate to
	  console.log(navigationIntent.url);

          //optionally cancel the navigation
	  navigationIntent.cancel();

        });
      }
	
</script>

Alternatives considered

An alternative is just to disable the client-side router

Importance

i cannot use SvelteKit without it

Additional Information

No response

[zommerberg]

Closing this since there is an issue for that already #560

[zommerberg]

Reopening this since it is a different request from the onNavigate function proposed by Rich. I think we can move the discussion about the onBeforeNavigate function in this request.

[zommerberg]

I was looking at the current router implementation and new onBeforeNavigate would need to be triggered by a synthetic event. Currently, we have "navigation-start" and "navigation-end" events, we should add something like "navigation-intent" event
and add it to all of the places that handle click, goto, and browser navigations like so:

And for the client, we would create an event listener function that will be triggered each time the event is called.
Like so:

[IsaacHub]

Will this work for you? https://github.com/sw-yx/svelte-actions#preventtabclose

[zommerberg]

Will this work for you? https://github.com/sw-yx/svelte-actions#preventtabclose

@IsaacHub No, I also need to handle browser buttons, hrefs, and programmatically navigation without a button.

I've already made a pull request for that here: #2982