Vue Router cung cấp các hàm chặn điều hướng để kiểm soát hành vi chuyển trang giữa các route.

Navigation Guards toàn cục

Các hàm chặn toàn cục được gọi theo thứ tự khai báo khi có yêu cầu điều hướng. Hàm này hoạt động bất đồng bộ, trạng thái điều hướng sẽ bị tạm dừng cho đến khi tất cả các hàm được giải quyết.

// Khởi tạo router
const appRouter = new VueRouter({ ... })

// Thực thi trước khi chuyển trang
appRouter.beforeEach((targetRoute, currentRoute, proceed) => {
  // ...
})
// Thực thi sau khi chuyển trang
appRouter.afterEach(route => {
  // ...
})

Các tham số truyền vào:

• targetRoute: Route: Đối tượng route mục tiêu
• currentRoute: Route: Route hiện tại
• proceed: Function: Phải gọi phương thức này để tiếp tục quá trình điều hướng. Kết quả phụ thuộc vào cách gọi proceed

Lưu ý: Không được bỏ qua việc gọi proceed, nếu không điều hướng sẽ bị treo

proceed(): Tiếp tục xử lý các hàm chặn tiếp theo. Khi tất cả hàm hoàn thành, trạng thái điều hướng được xác nhận

proceed(false): Hủy bỏ điều hướng. Nếu URL thay đổi (do người dùng thao tác trực tiếp hoặc dùng nút back), URL sẽ quay về trạng thái ban đầu

proceed('/home') hoặc proceed({ path: '/home' }): Chuyển hướng đến route mới, hủy bỏ điều hướng hiện tại

Navigation Guards trong component

Các hàm chặn có thể được định nghĩa trực tiếp bên trong component route

beforeRouteEnter beforeRouteUpdate beforeRouteLeave

const UserComponent = {
  template: `...`,
  beforeRouteEnter (targetRoute, currentRoute, proceed) {
    // Gọi trước khi render component, nhưng không thể truy cập this
    // Vì component chưa được khởi tạo
  },
  beforeRouteUpdate (targetRoute, currentRoute, proceed) {
    // Gọi khi route thay đổi nhưng component được tái sử dụng
    // Ví dụ: /user/:id chuyển từ /user/1 sang /user/2
    // Có thể truy cập this
  },
  beforeRouteLeave (targetRoute, currentRoute, proceed) {
    // Gọi khi rời khỏi route chứa component
    // Có thể truy cập this
  }
}

Hàm beforeRouteEnter không truy cập được this, các hàm còn lại có thể truy cập this

// (Vì hàm được gọi trước khi điều hướng được xác nhận, component mới chưa được tạo)

Có thể truyền callback vào proceed để truy cập instance component. Callback sẽ được thực thi khi điều hướng xác nhận và nhận instance component làm tham số

Navigation Guards cho route cụ thể

beforeEnter

Có thể khai báo hàm chặn trực tiếp trong cấu hình route

const appRouter = new VueRouter({
  routes: [
    {
      path: '/profile',
      component: UserComponent,
      beforeEnter: (targetRoute, currentRoute, proceed) => {
        // ...
      }
    }
  ]
});