NavigateEvent:navigationType 属性
Baseline
2026
Newly available
Since January 2026, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
NavigateEvent 接口的 navigationType 只读属性返回导航的类型——push、reload、replace 或 traverse。
值
代表导航的类型的枚举值。
可能的值包括:
push:导航到新位置,导致新条目被推送到历史列表中。reload:Navigation.currentEntry已重新加载。replace:Navigation.currentEntry被替换为新的历史记录条目。此新条目将重用相同的key,但分配不同的id。traverse:浏览器从一个现有的历史记录条目导航到另一个现有的历史记录条目。
示例
>具有特殊后退/前进处理的异步转换
有时需要特别处理后退/前进导航,例如通过将缓存的视图转换到屏幕上来重用它们。这可以通过以下分支来实现:
js
navigation.addEventListener("navigate", (event) => {
// 有些导航,例如跨源导航,我们无法拦截。让浏览器正常处理这些导航。
if (!event.canIntercept) {
return;
}
// 不要拦截片段导航或下载。
if (event.hashChange || event.downloadRequest !== null) {
return;
}
event.intercept({
async handler() {
if (myFramework.currentPage) {
await myFramework.currentPage.transitionOut();
}
let { key } = event.destination;
if (
event.navigationType === "traverse" &&
myFramework.previousPages.has(key)
) {
await myFramework.previousPages.get(key).transitionIn();
} else {
// 这可能会导致 myFramework 将渲染的页面存储在 myFramework.previousPages 中。
await myFramework.renderPage(event.destination);
}
},
});
});
规范
| Specification |
|---|
| HTML> # dom-navigateevent-navigationtype-dev> |
浏览器兼容性
参见
- 现代客户端路由:导航 API
- 导航 API 说明
- Domenic Denicola 的导航 API 在线演示