Navigation

Thuộc tính thể hiện

Kế thừa thuộc tính từ giao diện cha, EventTarget.

activation Read only

Trả về một đối tượng NavigationActivation chứa thông tin về lần điều hướng xuyên tài liệu gần nhất, đã "kích hoạt" Document này.

canGoBack Read only

Trả về true nếu có thể điều hướng ngược trong lịch sử điều hướng (tức là currentEntry không phải là mục đầu tiên trong danh sách mục lịch sử), và false nếu không thể.

canGoForward Read only

Trả về true nếu có thể điều hướng tới trước trong lịch sử điều hướng (tức là currentEntry không phải là mục cuối cùng trong danh sách mục lịch sử), và false nếu không thể.

currentEntry Read only

Trả về một đối tượng NavigationHistoryEntry đại diện cho vị trí mà người dùng hiện đang được điều hướng tới ngay lúc này.

transition Read only

Trả về một đối tượng NavigationTransition đại diện cho trạng thái của một điều hướng đang diễn ra, có thể dùng để theo dõi nó. Trả về null nếu hiện không có điều hướng nào đang diễn ra.

Phương thức thể hiện

Kế thừa phương thức từ giao diện cha, EventTarget.

back()

Điều hướng lùi lại một mục trong lịch sử điều hướng.

entries()

Trả về một mảng các đối tượng NavigationHistoryEntry đại diện cho tất cả các mục lịch sử hiện có.

forward()

Điều hướng tiến tới một mục trong lịch sử điều hướng.

navigate()

Điều hướng đến một URL cụ thể, cập nhật bất kỳ trạng thái nào được cung cấp trong danh sách mục lịch sử.

reload()

Tải lại URL hiện tại, cập nhật bất kỳ trạng thái nào được cung cấp trong danh sách mục lịch sử.

traverseTo()

Điều hướng đến một NavigationHistoryEntry cụ thể được xác định bằng key.

updateCurrentEntry()

Cập nhật trạng thái của currentEntry; được dùng trong các trường hợp thay đổi trạng thái độc lập với một điều hướng hoặc tải lại.

Sự kiện

Kế thừa sự kiện từ giao diện cha, EventTarget.

currententrychange

Phát ra khi Navigation.currentEntry đã thay đổi.

navigate

Phát ra khi bất kỳ loại điều hướng nào được khởi tạo, cho phép bạn chặn khi cần.

navigateerror

Phát ra khi một điều hướng thất bại.

navigatesuccess

Phát ra khi một điều hướng thành công đã hoàn tất.

Ví dụ

Di chuyển tiến và lùi trong lịch sử

async function backHandler() {
  if (navigation.canGoBack) {
    await navigation.back().finished;
    // Handle any required clean-up after
    // navigation has finished
  } else {
    displayBanner("You are on the first page");
  }
}

async function forwardHandler() {
  if (navigation.canGoForward) {
    await navigation.forward().finished;
    // Handle any required clean-up after
    // navigation has finished
  } else {
    displayBanner("You are on the last page");
  }
}

Duyệt tới một mục lịch sử cụ thể

// On JS startup, get the key of the first loaded page
// so the user can always go back there.
const { key } = navigation.currentEntry;
backToHomeButton.onclick = () => navigation.traverseTo(key);

// Navigate away, but the button will always work.
await navigation.navigate("/another_url").finished;

Điều hướng và cập nhật trạng thái

navigation.navigate(url, { state: newState });

Hoặc

navigation.reload({ state: newState });

Hoặc nếu trạng thái độc lập với một điều hướng hoặc tải lại:

navigation.updateCurrentEntry({ state: newState });

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• Modern client-side routing: the Navigation API
• Navigation API explainer
• Navigation API live demo (view demo source)