NavigationPrecommitController

Instanzmethoden

addHandler()

Fügt eine Handler-Callback-Funktion hinzu, die nach der Festlegung der Navigation ausgeführt wird, als ob sie mit dem Argument options.handler zu NavigateEvent.intercept() hinzugefügt worden wäre.

redirect()

Leitet den Browser zu einer angegebenen URL um und spezifiziert das Verhalten der Historie sowie alle gewünschten Statusinformationen.

Beschreibung

Beim Spezifizieren des Navigationsverhaltens im selben Dokument über die Methode NavigateEvent.intercept() ist es möglich, Präcommit-Aktionen über den precommitHandler Callback zu spezifizieren. Präcommit-Aktionen werden verwendet, um die laufende Navigation zu ändern oder abzubrechen oder um Arbeiten während der laufenden Navigation auszuführen, bevor sie festgeschrieben wird (siehe Grundlegendes Beispiel für Präcommit-Navigation).

Um das Umleitungsverhalten zu spezifizieren, verwenden Sie das NavigationPrecommitController-Objekt, das in Ihre precommitHandler-Callback-Funktion übergeben wird. Innerhalb des Funktionskörpers können Sie die Methode NavigationPrecommitController.redirect() aufrufen, die als Argument ein Objekt mit der Umleitungs-URL sowie dem erforderlichen Historienverhalten und Statusinformationen nimmt.

Nachdem eine Navigation festgeschrieben wurde, kann ein Post-Commit-Handler-Callback ausgeführt werden, um Operationen wie das Abrufen und Rendern von Inhalten durchzuführen. Wenn der Post-Commit-Navigation-Code von zur Laufzeit gesammelten Daten in Ihrem precommitHandler abhängt, können Sie in Ihrem Precommit-Handler addHandler() aufrufen, um diesen Post-Commit-Handler-Callback dynamisch hinzuzufügen. Beachten Sie, dass Sie, wenn der Post-Commit-Code unabhängig vom Präcommit-Code ist, stattdessen den handler Callback an die NavigateEvent.intercept() Methode übergeben können.

Siehe die intercept() Beschreibung für zusätzliche Kontextinformationen.

Beispiele

Grundlegendes Beispiel für Präcommit-Navigation

Das folgende Snippet zeigt, wie Sie den Browser zu einer Anmeldeseite umleiten würden, wenn der Benutzer auf eine eingeschränkte Seite navigiert und nicht angemeldet ist.

navigation.addEventListener("navigate", (event) => {
  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/restricted/") && !userSignedIn) {
    event.intercept({
      async precommitHandler(controller) {
        controller.redirect("/signin/", {
          state: "signin-redirect",
          history: "push",
        });
      },
    });
  }
});

Dieses Muster ist einfacher als die Alternative, die ursprüngliche Navigation abzubrechen und eine neue zur Umleitungsstelle zu starten, da es den Zwischenzustand vermeidet offenzulegen. Beispielsweise wird nur ein navigatesuccess oder navigateerror Ereignis ausgelöst, und wenn die Navigation durch einen Aufruf von Navigation.navigate() ausgelöst wurde, wird das Versprechen nur erfüllt, wenn das Umleitungsziel erreicht wurde.

Hinzufügen eines Handlers, der vom Präcommit-Verhalten abhängig ist

Dies ist eine kleine Modifikation des vorherigen Beispiels, die auch eine Nachricht an den Benutzer anzeigt, die den Grund erklärt, warum er nach der Umleitung auf der Anmeldeseite gelandet ist. Dies verwendet addHandler() im Präcommit-Handler, um den Post-Commit-Handler hinzuzufügen, der die Nachricht anzeigt.

navigation.addEventListener("navigate", (event) => {
  const url = new URL(event.destination.url);

  if (url.pathname.startsWith("/restricted/") && !userSignedIn) {
    event.intercept({
      async precommitHandler(controller) {
        controller.redirect("/signin/", {
          state: "signin-redirect",
          history: "push",
        });

        // Use addHandler to trigger logic once the /signin/ page commits
        controller.addHandler(() => {
          showMessage("Please sign in to view that content.");
        });
      },
    });
  }
});

Ein Vorteil dieses Ansatzes ist, dass der Handler nur ausgeführt wird, wenn die Umleitung festgeschrieben ist. Der Handler würde für alle Ereignisse ausgeführt werden, wenn er durch Übergeben von options.handler zu intercept() hinzugefügt worden wäre.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Moderner clientseitiger Routing: Die Navigation API