🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Chào mừng đến với Cafedev! Trong quá trình phát triển ứng dụng Vue.js, việc điều hướng giữa các trang là một phần quan trọng. Tuy nhiên, đôi khi chúng ta cần đợi kết quả của một cuộc điều hướng trước khi thực hiện hành động tiếp theo. Trong bài viết này, chúng ta sẽ khám phá cách làm điều này bằng cách sử dụng Vue Router. Hãy cùng nhau tìm hiểu cách chờ đợi kết quả của một điều hướng trong ứng dụng Vuejs.


Khi sử dụng router-link, Vue Router gọi router.push để kích hoạt một điều hướng. Trong khi hành vi mong đợi đối với hầu hết các liên kết là điều hướng người dùng đến một trang mới, có một số tình huống mà người dùng sẽ vẫn ở trên cùng một trang:
– Người dùng đã ở trên trang mà họ đang cố gắng điều hướng đến.
– Một bộ lọc điều hướng ngắt điều hướng bằng cách thực hiện return false.
– Một bộ lọc điều hướng mới diễn ra trong khi bộ lọc trước chưa hoàn thành.
– Một bộ lọc điều hướng chuyển hướng nơi khác bằng cách trả về một vị trí mới (ví dụ: return '/login').
– Một bộ lọc điều hướng ném ra một Error.
Nếu chúng ta muốn thực hiện một số hành động sau khi một điều hướng hoàn thành, chúng ta cần một cách để đợi sau khi gọi router.push. Hãy tưởng tượng rằng chúng ta có một menu di động cho phép chúng ta đi đến các trang khác nhau và chúng tôi chỉ muốn ẩn menu sau khi chúng tôi đã điều hướng đến trang mới, chúng tôi có thể muốn làm điều này như sau:

router.push('/my-profile')
this.isMenuOpen = false

Nhưng điều này sẽ đóng menu ngay lập tức vì các điều hướng là bất đồng bộ, chúng ta cần await promise được trả về bởi router.push:

await router.push('/my-profile')
this.isMenuOpen = false

Bây giờ menu sẽ đóng sau khi điều hướng hoàn thành nhưng nó cũng sẽ đóng nếu điều hướng bị ngăn chặn. Chúng ta cần một cách để phát hiện xem chúng ta thực sự đã thay đổi trang đang ở hay không.

1. Phát hiện Lỗi Điều hướng

Nếu một điều hướng bị ngăn chặn, dẫn đến người dùng vẫn ở trên cùng một trang, giá trị được giải quyết của Promise được trả về bởi router.push sẽ là một Lỗi Điều hướng. Ngược lại, nó sẽ là một giá trị falsy (thông thường là undefined). Điều này cho phép chúng ta phân biệt trường hợp chúng ta đã điều hướng ra khỏi nơi chúng ta đang ở hay không:

const navigationResult = await router.push('/my-profile')

if (navigationResult) {
  // navigation prevented
} else {
  // navigation succeeded (this includes the case of a redirection)
  this.isMenuOpen = false
}

Lỗi Điều hướng là các trường hợp Error với một số thuộc tính bổ sung cung cấp đủ thông tin để biết điều hướng nào đã bị ngăn chặn và tại sao. Để kiểm tra tính chất của một kết quả điều hướng, sử dụng hàm isNavigationFailure:

import { NavigationFailureType, isNavigationFailure } from 'vue-router'

// trying to leave the editing page of an article without saving
const failure = await router.push('/articles/2')

if (isNavigationFailure(failure, NavigationFailureType.aborted)) {
  // show a small notification to the user
  showToast('You have unsaved changes, discard and leave anyway?')
}

gợi ý Nếu bạn bỏ qua tham số thứ hai: isNavigationFailure(failure), nó chỉ sẽ kiểm tra xem failure có phải là một Lỗi Điều hướng không.

2. Lỗi Điều hướng toàn cầu

Bạn có thể phát hiện lỗi điều hướng toàn cầu bằng cách sử dụng bộ lọc điều hướng <coderouter.afterEach()>:

router.afterEach((to, from, failure) => {
  if (failure) {
    sendToAnalytics(to, from, failure)
  }
})

3. Phân biệt Lỗi Điều hướng

Như chúng tôi đã nói ở đầu, có các tình huống khác nhau làm hủy một điều hướng, tất cả chúng dẫn đến các Lỗi Điều hướng khác nhau. Chúng có thể được phân biệt bằng cách sử dụng isNavigationFailure và NavigationFailureType. Có ba loại khác nhau:
– aborted: false được trả về bên trong một bộ lọc điều hướng cho điều hướng.
– cancelled: Một điều hướng mới xảy ra trước khi điều hướng hiện tại kết thúc. Ví dụ: router.push được gọi trong khi đang chờ đợi bên trong một bộ lọc điều hướng.
– duplicated: Điều hướng đã bị ngăn chặn vì chúng ta đã ở tại vị trí đích.

4. Thuộc tính của Lỗi Điều hướng

Tất cả các lỗi điều hướng đều hiển thị các thuộc tính to và from để phản ánh vị trí hiện tại cũng như vị trí đích cho điều hướng thất bại:

// trying to access the admin page
router.push('/admin').then(failure => {
  if (isNavigationFailure(failure, NavigationFailureType.aborted)) {
    failure.to.path // '/admin'
    failure.from.path // '/'
  }
})

Trong tất cả các trường hợp, to và from là các vị trí địa lý đã được chuẩn hóa.

5. Phát hiện Điều hướng lại

Khi trả về một vị trí mới bên trong một Bộ lọc Điều hướng, chúng ta đang kích hoạt một điều hướng mới ghi đè lên điều hướng đang diễn ra. Khác biệt với các giá trị trả về khác, một chuyển hướng không ngăn cản một điều hướng, nó tạo ra một điều hướng mới. Do đó, nó được kiểm tra khác nhau, bằng cách đọc thuộc tính redirectedFrom trong Một Vị trí Địa lý Điều hướng:

await router.push('/my-profile')
if (router.currentRoute.value.redirectedFrom) {
  // redirectedFrom is resolved route location like to and from in navigation guards
}

Trên Cafedev, chúng ta đã tìm hiểu cách đợi kết quả của một cuộc điều hướng trong Vue.js bằng Vue Router. Việc này rất hữu ích khi chúng ta muốn thực hiện một hành động cụ thể sau khi điều hướng hoàn tất. Dù là ẩn hiện thanh điều hướng hoặc xử lý các tình huống lỗi, việc hiểu cách chờ đợi kết quả của cuộc điều hướng sẽ giúp chúng ta tối ưu hóa trải nghiệm người dùng trên ứng dụng Vuejs của chúng ta.

Tham khảo thêm: MIỄN PHÍ 100% | Series tự học Vuejs từ cơ bản tới nâng cao

Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của CafeDev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

BÀI VIẾT LIÊN QUANXEM THÊM