NavigateEvent: NavigateEvent() constructor

type

A string representing the type of event. In the case of NavigateEvent this is always navigate.

init

An object containing the following properties:

canIntercept Optional

A boolean defining whether the navigation can be intercepted or not (e.g. you can't intercept a cross-origin navigation). Defaults to false.

destination

A NavigationDestination object representing the location being navigated to.

downloadRequest Optional

The filename of the file requested for download, in the case of a download navigation (e.g. an <a> or <area> element with a download attribute). Defaults to null.

formData Optional

The FormData object representing the submitted data in the case of a POST form submission. Defaults to null.

hashChange Optional

A boolean defining if the navigation is a fragment navigation (i.e. to a fragment identifier in the same document). Defaults to false.

info Optional

The info data value passed by the initiating navigation operation (e.g. Navigation.back(), or Navigation.navigate()).

navigationType Optional

The type of the navigation. Possible values — push, reload, replace, and traverse. Defaults to push.

signal

An AbortSignal, which will become aborted if the navigation is cancelled (e.g. by the user pressing the browser's "Stop" button, or another navigation starting and thus cancelling the ongoing one).

userInitiated Optional

A boolean defining whether the navigation was initiated by the user (e.g. by clicking a link, submitting a form, or pressing the browser's "Back"/"Forward" buttons). Defaults to false.

A developer would not use this constructor manually. A new NavigateEvent object is constructed when a handler is invoked as a result of the navigate event firing.

navigation.addEventListener("navigate", (event) => {
  // Exit early if this navigation shouldn't be intercepted,
  // e.g. if the navigation is cross-origin, or a download request
  if (shouldNotIntercept(event)) {
    return;
  }

  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/articles/")) {
    event.intercept({
      async handler() {
        // The URL has already changed, so show a placeholder while
        //fetching the new content, such as a spinner or loading page
        renderArticlePagePlaceholder();

        // Fetch the new content and display when ready
        const articleContent = await getArticleContent(url.pathname);
        renderArticlePage(articleContent);
      },
    });
  }
});

• Modern client-side routing: the Navigation API
• Navigation API explainer
• Domenic Denicola's Navigation API live demo