導航：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 |
瀏覽器相容性
載入中…