NavigationHistoryEntry: key property
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The key
read-only property of the
NavigationHistoryEntry
interface returns the key
of the history entry. This is a unique, UA-generated value that represents the history entry's slot in the entries list. It is used to navigate that particular slot via Navigation.traverseTo()
. The key
will be reused by other entries that replace the entry in the list (that is, if the NavigateEvent.navigationType
is replace
).
This differs from the id
of a history entry. The id
is a unique, UA-generated value that always represents a specific history entry rather than its slot in the entries list. This is useful to correlate it with an external resource such as a storage cache.
Value
A string representing the key
of the NavigationHistoryEntry
.
Examples
Basic usage
js
const current = navigation.currentEntry;
console.log(current.key);
Set up a home button
js
function initHomeBtn() {
// Get the key of the first loaded entry
// so the user can always go back to this view.
const { key } = navigation.currentEntry;
backToHomeButton.onclick = () => {
navigation.traverseTo(key);
};
}
// Intercept navigate events, such as link clicks, and
// replace them with single-page navigations
navigation.addEventListener("navigate", (event) => {
event.intercept({
async handler() {
// Navigate to a different view,
// but the "home" button will always work.
},
});
});
Specifications
Specification |
---|
Unknown specification # dom-navigationhistoryentry-key |
Browser compatibility
BCD tables only load in the browser