导航：navigate() 方法
Navigation 接口的 navigate() 方法导航到指定的 URL，并更新历史条目列表中提供的任何状态。
语法
navigate(url)
navigate(url, options)
参数
url-
导航到的目标 URL。请注意，当在另一个窗口的
navigation对象上调用navigate()时，URL 将相对于目标窗口的 URL 进行解析，而不是调用窗口的 URL。这与 History API 的行为一致，但与 Location API 的行为不一致。 options可选-
一个包含以下属性的选项对象
state可选-
在导航完成后要存储在关联的
NavigationHistoryEntry中的开发者定义的信息，可以通过getState()检索。这可以是任何数据类型。例如，您可能希望存储页面访问次数以用于分析，或者存储 UI 状态详细信息，以便可以显示用户上次离开时的视图。存储在state中的任何数据都必须是 结构化克隆 的。 info可选-
要传递给
navigate事件的开发者定义的信息，可在NavigateEvent.info中访问。这可以是任何数据类型。例如，您可能希望根据内容的导航方式（左滑、右滑或主页）以不同的动画显示新导航的内容。可以将指示使用哪种动画的字符串作为info传递。 history可选-
一个枚举值，用于设置此导航的历史记录行为。可用值有：
auto：默认值；通常会执行push导航，但在特殊情况下会执行replace导航（请参阅下面的NotSupportedError描述）。push：将一个新的NavigationHistoryEntry推送到条目列表，或在特殊情况下失败（请参阅下面的NotSupportedError描述）。replace：将替换当前的NavigationHistoryEntry。
返回值
具有以下属性的对象：
committed-
一个
Promise，当可见 URL 已更改且已创建新的NavigationHistoryEntry时，它将fulfilled。 finished-
一个
Promise，当intercept()处理程序返回的所有 Promise 都 fulfilled 时，它将 fulfilled。这相当于NavigationTransition.finishedPromise fulfilled，当navigatesuccess事件触发时。
如果导航因某种原因失败，则这两个 Promise 中的任何一个都会 rejected。
异常
DataCloneErrorDOMException-
如果
state参数包含的值不是结构化克隆的，则抛出此错误。 SyntaxErrorDOMException-
如果
url参数不是有效 URL，则抛出此错误。 NotSupportedErrorDOMException-
如果
history选项设置为push，并且出现以下任何特殊情况，则抛出此错误：- 浏览器当前显示的是初始
about:blank文档。 url的方案是javascript。
- 浏览器当前显示的是初始
示例
设置主页按钮
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.
},
});
});
智能返回按钮
页面提供的“返回”按钮可以通过检查之前的历史记录条目，即使在重新加载后也能带您返回
backButtonEl.addEventListener("click", () => {
if (
navigation.entries()[navigation.currentEntry.index - 1]?.url ===
"/product-listing"
) {
navigation.back();
} else {
// If the user arrived here in some other way
// e.g. by typing the URL directly:
navigation.navigate("/product-listing", { history: "replace" });
}
});
使用 info 和 state
async function navigateHandler() {
await navigation.navigate(url, {
info: { animation: "swipe-right" },
state: { infoPaneOpen: true },
}).finished;
// Update application state
// …
}
规范
| 规范 |
|---|
| HTML # dom-navigation-navigate-dev |
浏览器兼容性
加载中…