Chào mừng đến với Cafedev, nơi chúng tôi không chỉ chia sẻ kiến thức về lập trình mà còn đem đến những giải pháp và kỹ thuật mới nhất cho cộng đồng phát triển web. Trong bài viết này, chúng ta sẽ tìm hiểu về Router Vuejs với hành vi cuộn, một tính năng quan trọng giúp điều hướng trang web một cách mượt mà và linh hoạt hơn. Hãy cùng khám phá cách sử dụng hành vi cuộn trong Vue Router để tối ưu trải nghiệm người dùng của bạn!
Khi sử dụng định tuyến phía máy khách, chúng ta có thể muốn cuộn lên đầu khi điều hướng đến một tuyến đường mới, hoặc duy trì vị trí cuộn của các mục nhập lịch sử giống như việc tải lại trang thực sự. Vue Router cho phép bạn đạt được điều này và thậm chí còn tốt hơn, cho phép bạn hoàn toàn tùy chỉnh hành vi cuộn khi điều hướng tuyến đường.
Lưu ý: tính năng này chỉ hoạt động nếu trình duyệt hỗ trợ history.pushState.
Khi tạo ra thể hiện router, bạn có thể cung cấp hàm scrollBehavior:
const router = createRouter({
history: createWebHashHistory(),
routes: [...],
scrollBehavior (to, from, savedPosition) {
// return desired position
}
})Hàm scrollBehavior nhận các đối tượng tuyến đường to và from, giống như Navigation Guards. Đối số thứ ba, savedPosition, chỉ có sẵn nếu đây là một điều hướng popstate (kích hoạt bởi các nút back/forward của trình duyệt).
Hàm có thể trả về một đối tượng vị trí ScrollToOptions:
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
// always scroll to top
return { top: 0 }
},
})Bạn cũng có thể truyền một bộ chọn CSS hoặc một phần tử DOM qua el. Trong tình huống đó, top và left sẽ được xử lý như là các độ lệch tương đối đến phần tử đó.
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
// always scroll 10px above the element #main
return {
// could also be
// el: document.getElementById('main'),
el: '#main',
// 10px above the element
top: 10,
}
},
})Nếu giá trị falsy hoặc một đối tượng trống được trả về, không có cuộn nào sẽ xảy ra.
Trả về savedPosition sẽ dẫn đến một hành vi giống như native khi điều hướng với các nút back/forward:
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { top: 0 }
}
},
})Nếu bạn muốn mô phỏng hành vi “cuộn đến mục neo”:
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
return {
el: to.hash,
}
}
},
})Nếu trình duyệt của bạn hỗ trợ hành vi cuộn, bạn có thể làm cho nó mượt mà:
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
return {
el: to.hash,
behavior: 'smooth',
}
}
}
})1. Trì hoãn cuộn
Đôi khi chúng ta cần phải đợi một chút trước khi cuộn trong trang. Ví dụ, khi xử lý các chuyển động, chúng ta muốn đợi cho chuyển động hoàn thành trước khi cuộn. Để làm điều này, bạn có thể trả về một Promise trả về mô tả vị trí mong muốn. Dưới đây là một ví dụ khi chúng ta đợi 500ms trước khi cuộn:
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ left: 0, top: 0 })
}, 500)
})
},
})Có thể kết nối điều này với các sự kiện từ một thành phần chuyển động cấp trang để làm cho hành vi cuộn hoạt động một cách tốt nhất với các chuyển động trang của bạn, nhưng do sự biến thiên và phức tạp có thể có trong các trường hợp sử dụng, chúng tôi đơn giản cung cấp công cụ này để cho phép triển khai cụ thể của người dùng.
Như vậy, chúng ta đã tìm hiểu về Router Vuejs với hành vi cuộn, một tính năng quan trọng giúp cải thiện trải nghiệm người dùng trên các ứng dụng web Vuejs. Tại Cafedev, chúng tôi luôn không ngừng khám phá và chia sẻ những kiến thức và kỹ thuật mới nhất để đem lại giá trị cho cộng đồng phát triển. Hy vọng rằng thông qua bài viết này, bạn đã có cái nhìn rõ ràng hơn về cách tận dụng hành vi cuộn để tối ưu hóa ứng dụng của mình. Hãy tiếp tục đồng hành cùng Cafedev để không bỏ lỡ những thông tin và bài viết hữu ích khác!
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!
