NavigationDestination

Instanzeigenschaften

id Schreibgeschützt Experimentell

Gibt den id-Wert des Ziel-NavigationHistoryEntry zurück, wenn der NavigateEvent.navigationType traverse ist, oder einen leeren String sonst.

index Schreibgeschützt Experimentell

Gibt den index-Wert des Ziel-NavigationHistoryEntry zurück, wenn der NavigateEvent.navigationType traverse ist, oder -1 sonst.

key Schreibgeschützt Experimentell

Gibt den key-Wert des Ziel-NavigationHistoryEntry zurück, wenn der NavigateEvent.navigationType traverse ist, oder einen leeren String sonst.

sameDocument Schreibgeschützt Experimentell

Gibt true zurück, wenn die Navigation zum gleichen document wie der aktuelle Document-Wert erfolgt, oder false sonst.

url Schreibgeschützt Experimentell

Gibt die URL zurück, zu der navigiert wird.

Instanzmethoden

getState() Experimentell

Gibt eine Kopie des verfügbaren Zustands zurück, der mit dem Ziel-NavigationHistoryEntry oder dem Navigationsvorgang (z.B. navigate()) verknüpft ist, wie angebracht.

Beispiele

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; } // Returns a URL() object constructed from the // NavigationDestination.url value 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); }, }); } }); 

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Modern client-side routing: the Navigation API
• Navigation API explainer
• Navigation API live demo (Quellcode der Demo ansehen)