Navigation Lifecycle

/**
 * Register callback to run before navigation
 * @param callback - Function that receives navigation details
 */
function beforeNavigate(
  callback: (navigation: BeforeNavigate) => void
): void;

interface BeforeNavigate {
  from: { route: { id: string | null }; url: URL; params: Record<string, string> } | null;
  to: { route: { id: string | null }; url: URL; params: Record<string, string> } | null;
  type: 'form' | 'leave' | 'link' | 'goto' | 'popstate';
  willUnload: boolean;
  delta?: number;
  cancel(): void;
}

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

beforeNavigate(({ from, to, cancel }) => {
  if (hasUnsavedChanges) {
    if (!confirm('Leave without saving?')) {
      cancel();
    }
  }
});

/**
 * Register callback to run after navigation completes
 * @param callback - Function that receives navigation details
 */
function afterNavigate(
  callback: (navigation: AfterNavigate) => void
): void;

interface AfterNavigate {
  from: { route: { id: string | null }; url: URL; params: Record<string, string> } | null;
  to: { route: { id: string | null }; url: URL; params: Record<string, string> } | null;
  type: 'enter' | 'form' | 'link' | 'goto' | 'popstate';
  willUnload: boolean;
  delta?: number;
}

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

afterNavigate(({ from, to }) => {
  // Track page view
  analytics.track('pageview', {
    from: from?.url.pathname,
    to: to?.url.pathname
  });
});

/**
 * Register callback during navigation (for view transitions)
 * @param callback - Function that receives navigation details
 */
function onNavigate(
  callback: (navigation: OnNavigate) => void
): void;

interface OnNavigate {
  from: { route: { id: string | null }; url: URL; params: Record<string, string> } | null;
  to: { route: { id: string | null }; url: URL; params: Record<string, string> } | null;
  type: 'form' | 'link' | 'goto' | 'popstate';
  willUnload: boolean;
  delta?: number;
}

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

onNavigate(() => {
  if (!document.startViewTransition) return;

  return new Promise(resolve => {
    document.startViewTransition(async () => {
      resolve();
      await new Promise(r => setTimeout(r, 0));
    });
  });
});

/**
 * Disable automatic scroll handling for current navigation
 */
function disableScrollHandling(): void;

import { disableScrollHandling } from '$app/navigation';
import { onMount } from 'svelte';

onMount(() => {
  disableScrollHandling();
  // Custom scroll behavior
  window.scrollTo(0, savedPosition);
});